微信小程序开发入门教程(一)---hello world
由于无法备案网站,前期做了个微信小程序(开发版)就搁置了,几乎忘了开发过程。现在重新梳理,做个记录。
一、最基本的小程序前端例子hello
1、下载安装 微信开发者工具 官网: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
2、运行后首先提示扫码,在手机上确认登录(我以前注册过微信公众平台,如果你未注册过的话,可能需要先去注册)。登录后,页面显示了我之前做的几个小程序项目。排第一个的是一个加号(+),用来新建项目。
3、点上步的加号(+),新建项目名称写的是:hello ; 目录 我设的是:E:\wxDEV\hello;AppId 我点选的是:测试号;开发模式:小程序;后端服务:默认不使用云服务;语言:javascript ; 然后点:新建
4、在 微信开发者工具 界面上,点三个横点(…)弹出E:\wxDEV\hello硬盘目录,里面就是小程序前端代码了。点预览(眼睛形状)图标,会弹出二维码,用手机扫码后,可以在手机上测试使用小程序了。(在手机微信中的微信页面,向下滑动,会出现最近使用过的小程序)
5、但那些代码表示什么呢?手册在:https://developers.weixin.qq.com/miniprogram/dev/framework/ 下面分析一下E:\wxDEV\hello中的代码文件
5.1、sitemap.json 文件中有个链接:https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html;看了一下,是控制微信爬虫,即是否允许页面内容被用户搜索到
5.2、project.config.json 项目配置文件:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html 如:可以设置为小程序插件项目。
5.3、app.wxss https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html 相当于CSS样式表文件。
5.4、app.json https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE 小程序配置,又分为全局配置和页面配置。如:有哪些页面,页面标题、颜色等
5.5、app.js https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html 注册小程序APP实例,大概相当于程序入口的main函数吧。
6、目录utils下有util.js 大概是引入外部 js文件;参考:https://www.cnblogs.com/wangting888/p/9701658.html
7、目录pages下有两个目录,index和logs,每个目录表示一个小程序页面。其中,后缀为.wxml的相当于html页面,其它类似前面介绍的,分别是样式表、配置和js代码文件。参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
二、只有前端是不够的,没条件搭服务器怎么办?好在微信开发者工具提供了强大的云开发能力,参考上面步骤,新建项目helloyun(云端是node.js语言)
1、参考上面第3步新建小程序项目,项目名称:helloyun ; 目录:E:\wxDEV\helloyun ; AppID:只能选择自己注册的AppID,测试号无法云开发;开发模式:小程序;后端服务:小程序云开发;然后点 新建。云开发的例子已生成。可以点预览,并在手机上查看了。手机上小程序本身就相当于教程,其中介绍了两种操作云端数据库(或函数、调用)的办法:一是前端操作数据库;二是在cloudfunctions目录中新建云函数,使用wx-derver-sdk
参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
2、云开发项目的目录看似更简洁,E:\wxDEV\helloyun目录结构如下:
--cloudfunctions(目录)
--miniprogram(目录)
-project.config.json
-README.md
3、miniprogram对应的小程序前端(与本文第一部分类似),对应云端的是cloudfunctions目录(2019年8月8日生成的云开发项目,与以前用旧版开发工具生成的目录结构不一样了),新版的 E:\wxDEV\helloyun\cloudfunctions 目录下有4个目录:
-callback
-echo
-login
-openapi
4、先从手机的云开发QuickStart入手,点上传图片,然后拍照上传。根据上传后的提示,打开开发者工具,点云开发,进入云开发控制台(确认你是否已开通了云开发功能),在 存储 下,可以看到刚上传的my-image.jpg。
我们还是从前端入手分析,在开发者工具中, 查看E:\wxDEV\helloyun\miniprogram\pages\index\index.wxml 的代码。找到 上传图片 字样。对应的bindtap是
<view class="uploader">
<button class="uploader-text" bindtap="mydbadd">数据库add</button>
</view>
同时,在E:\wxDEV\helloyun\miniprogram\pages\index\index.js的最后一个})之前,加以下代码(也就是E:\wxDEV\helloyun\miniprogram\pages\databaseGuide\databaseGuide.js中的代码)
//my测试数据库add
mydbadd: function() {
const db = wx.cloud.database()
db.collection('goods').add({
data: {
count:
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count:
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
},
编译,点击 数据库add按钮 后,会看到后台数据库中新增了一条记录(确保已在后台数据库中设置了goods集合)。开发者工具 控制台console中也有相应的提示。
project.config.json
文件,可以看到已经有了cloudfunctionRoot
字段(如果没有,就按官方教程增加)// 云函数入口文件
const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext() return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
sum: event.a + event.b,
}
}
//my测试数据库add
mydbadd: function() {
const db = wx.cloud.database()
db.collection('goods').add({
data: {
count:
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count:
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
wx.cloud.callFunction({
// 云函数名称
name: 'sum',
// 传给云函数的参数
data: {
a: ,
b: ,
},
})
.then(res => {
console.log(res.result) //
})
.catch(console.error)
},
这样,在增加数据库数据的同时,就会调用云函数,并在开发者工具的console中显示调用结果。
微信小程序开发入门教程(一)---hello world的更多相关文章
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- 微信小程序开发入门教程(三)---小程序云开发支付功能
支付(shoukuan)功能真的很重要!由于我还没有商户号,以下代码未实际验证 1.服务端 进入云开发,新建云函数pay(应该也可以在开发者工具编写后上传) 编写后端代码index.js这里用到第三方 ...
- 微信小程序开发入门教程(四)---自己动手做个小程序
前面已将基础知识准备的差不多了,下面实际做一个小程序. 一.目标 用于上传照片和文字. 2个主要页面:我me,设置set 二.开始制作 1.打开微信开发者工具(我用的1.02.1907160 Wind ...
- 微信小程序开发入门教程(二)---分析官方云开发例子中的一些功能
接上一篇文章:https://www.cnblogs.com/pu369/p/11326538.html 1.官方云开发的例子中,点击获取 openid,对应代码在E:\wxDEV\helloyun\ ...
- 微信小程序开发系列教程三:微信小程序的调试方法
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
- 微信小程序开发入门与实践
基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MIN ...
- 微信小程序开发入门篇
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的& ...
- 微信小程序 新手入门教程
因为工作需要,最近学习了一下微信小程序,在此分享一下大概的流程. 强烈建议大家先去看微信小程序简易教程:点我进入 起步: 安装微信web开发软件者工具,需要破解的同学可以网上找破解教程,很简单的,这里 ...
- 微信小程序开发入门首选
推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发, ...
随机推荐
- Python 字符串,元祖,列表之间的转换
1.字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可.例如: var1 = 'Hello World!' 2. ...
- 单元操作和仓储模式 repository+unitOfWork
仓储和工作单元模式是用来在数据访问层和业务逻辑层之间创建一个抽象层.应用这些模式,可以帮助用来隔离你的程序在数据存储变化. 在数据源层和业务层之间增加一个repository层进行协调,有如下作用:1 ...
- python numpy 的用法—— bincount
今天看脚本的时候遇到了几个不懂的用法,记录下来供日后查看: 1.numpy bincount 先上图: 如上所示:首先要求输入的数组不能包含负数: 该函数是计算非负元素的个数,如果数组中的最大值为10 ...
- opencv 单目标模板匹配(只适用于模板与目标尺度相同)
#include <iostream> #include "opencv/cv.h" #include "opencv/cxcore.h" #inc ...
- cube打包后css顺序错误
先说下解决办法: 把import {...} from cube-ui放在 import App from './App.vue'的前面 不然会产生如下错误 正确的顺序
- httpclient 多附件上传
多附件上传实例: /** * 多附件上传 * @param host * @param uri * @param attachment 附件 * @param param body参数 * @retu ...
- 简单聊聊服务发现(redis, zk,etcd, consul)(转载)
服务发现并没有怎样的高深莫测,它的原理再简单不过.只是市面上太多文章将服务发现的难度妖魔化,读者被绕的云里雾里,顿觉自己智商低下不敢高攀. 服务提供者是什么,简单点说就是一个HTTP服务器,提供了AP ...
- 跨平台编译ceres for Android
折腾了几乎一天,记录一下. 最大的坑是官网给出的 1.进入ceres源代码目录下的jni目录 2.EIGEN_PATH="指向eigen库目录,即包含EIGEN文件夹的那个文件夹” ndk- ...
- SQL Server 2005 实现数据库同步备份 过程--结果---分析
数据库复制: 简单来说,数据库复制就是由两台服务器,主服务器和备份服务器,主服务器修改后,备份服务器自动修改. 复制的模式有两种:推送模式和请求模式,推送模式是主服务器修改后,自动发给备份服务器, ...
- JavaMaven【七、插件使用】
配置pom.xml 配置在那个周期的那个阶段执行该插件的功能 上图是配置了使用插件source3.0.1,该插件的功能是打包源码 并配置了在package阶段后执行打包源码的操作jar-no-fork ...