文章目录

一、创建项目
二、云函数
三、静默登录
四、获取用户信息
五、使用缓存
六、同页面数据操作
七、不同页面数据传递
八、页面跳转
九、检查版本更新
十、上线

前段时间自己做了一个云开发微信小程序，发现并不复杂，有前端基础的可以试一下。这里主要简单说明一下开发过程，更多内容可以在其他地方查看资料。

微信开放文档 (qq.com)

一、创建项目

1.使用微信小程序新建项目

（1）小程序注册，获取AppID

点击该链接，注册完成后，登录后点击“开发”，“开发设置”，找到”开发者ID“里面”AppID“

小程序 (qq.com)

（2）开发者工具

打开开发者工具，扫码登录后，点击新建项目，修改项目信息。主要填入自己的AppID和选择云开发。

可以不用一开始就选择云开发，后面可以再修改。

下载地址稳定版 Stable Build | 微信开放文档 (qq.com)

2.配置环境id

app.js文件中将env环境替换为自己的环境id，点击微信开发工具的“云开发”，再点击“设置”，可以查看。

3.添加tabBar

在app.json文件中添加 tabBar

"tabBar": {"list": [{"pagePath": "pages/index/index", // 页面路径"iconPath": "image/binggan.png", // 图标路径"selectedIconPath": "image/binggan-active.png", // 选中后图标路径"text": "首页" // 文字},{"pagePath": "pages/logs/logs","iconPath": "image/danhuang.png","selectedIconPath": "image/danhuang-active.png","text": "日志"}]},

此处推荐猫一宁的视频

【2020云开发+源码】（上） 30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数_哔哩哔哩_bilibili

二、云函数

1.云函数

（1）新建：右击cloudFunctions点击新建node.js云函数

（2）初始化：在JS文件中，在cloud.init()中的增加环境id

cloud.init({env: cloud.DYNAMIC_CURRENT_ENV
})

（3）更新：右击JS文件，点击“云函数增量上传：更新文件”

（4）编写：内容较多，可查看微信官方的开发文档

注意：在云函数中使用event.XX获取页面传递过来的值，XX为传递的值；

云函数访问数据库参考：

exports.main = async(event, context) => {let openid = event.openidlet pagenum = event.pagenumreturn await db.collection(’todo‘).where({openid: openid,show: true}).field({completed: true,title: true}).orderBy('startTime', 'desc').skip(pagenum).limit(8).get()
}

这是一个获取数据的请求，包括数据范围，选择返回的数据、时间排序、限制条数、跳过条数

2.访问云函数

可以参考下面静默登录中的写法。

三、静默登录

1.云函数

微信小程序可以直接获取用户的openid和其他身份标识，这里只获取openid。先完成云函数的新建和初始化，在云函数入口函数添加下面代码。

  try {const wxContext = cloud.getWXContext()return {openid: wxContext.OPENID,}} catch (e) {console.log(e)}

2.首页的JS文件

getOpenid() {// session_key 已经失效，需要重新执行登录流程wx.cloud.callFunction({name: 'login',complete: res => {app.globalData.openid = res.result.openidthis.setData({openid: res.result.openid})this.getData()}})},

四、获取用户信息

微信小程序经过修改，现在推荐用getUserProfile，可以使用点击的形式触发该函数，函数触发会询问用户是否同意，用户同意后即可获得用户信息，得到的是基本的用户信息，更多的用户信息获取可以查看开发文档。

getUserProfile() {// 推荐使用wx.getUserProfile获取用户信息wx.getUserProfile({desc: '展示用户信息',// 获取openidsuccess: (res) => {this.setData({userInfo: res.userInfo, // res.userInfo为返回的用户信息})}})}

五、使用缓存

关于缓存，个人推荐使用带Sync的同步版本，异步版本容易出错

1.缓存信息

try {wx.setStorageSync('userInfo', data)
} catch (e) {}

2.获取缓存

  getStorage() {try {var userInfo = wx.getStorageSync('userInfo')// 判断缓存是否存在if (userInfo) {// 存在，获取缓存this.setData({openid: userInfo.openid})}// 保存用户信息到app.globalData中app.globalData.userInfo = userInfo} catch (e) {}},

六、同页面数据操作

1.JS文件中的数据传递

同一JS文件中，数据通过page({})里面的data来保存，以userInfo为例

 data: {userInfo: {}}

获取：

userInfo = this.data.userInfo

修改：

this.setData({userInfo: res.data
})

2.html页面与JS的数据传递

（1）JS文件中data的数据改变后，会自动反应到wxml文件，即在页面中展示出来

（2）html在中数据获取，以点击事件获取id为例

wxml组件的button中设置点击事件，同时设置自定义data-id 属性：

catchtap = "delData" data-id="{{item._id}}

js文件中：

id = e.target.dataset.id

通过id来找到对应数据，修改JS中的数据来实现页面变化

（3）表单

多个数据获取，需要使用表单，具体查看开发文档。

七、不同页面数据传递

1.在app.js文件的APP({})里面插入globalData，以userInfo为例

 globalData: {userInfo: null}

2.获取和修改

（1）先在该页面的JS文件的page({})前面添加

const app = getApp()

（2）获取：

userInfo = app.globalData.userInfo

（3）修改：

app.globalData.userInfo = userInfo

八、页面跳转

1.wx.navigateTo

跳转到非tab页面，可以传递和接收数据，以下为简单的跳转，实现跳转和传递一个数据。

wx.navigateTo({url: '../editText/index', // 页面相对路径events: {},success: (res) => {res.eventChannel.emit('acceptDataFromOpenerPage', data)}})

2.wx.reLaunch

关闭了内存中所有保留的页面，再跳转到目标页面，路径后面接参数。注意：已打开过的页面会重新加载。

wx.reLaunch({url: '../idea/index?id=1'
})

3.wx.switchTab

跳转到tab页面，已打开过的页面不会重新加载，相当于重新展示页面，数据可以通过app.globalData传递，在onShow钩子函数中定义相关逻辑。

wx.switchTab({url: '../idea/index'
})

注意：做页面跳转的时候，需要注意不同的API对跳转的页面类型有限制。这里只说明基本使用，更多说明和其他跳转API可以查看开发文档。

九、检查版本更新

在app.js文件中增加函数

 getUpdate() {if (wx.canIUse('getUpdateManager')) {const updateManager = wx.getUpdateManager()updateManager.onCheckForUpdate(function(res) {// 请求完新版本信息的回调if (res.hasUpdate) {updateManager.onUpdateReady(function() {wx.showModal({title: '更新提示',content: '新版本已经准备好，是否重启应用？',success: function(res) {// res: {errMsg: "showModal: ok", cancel: false, confirm: true}if (res.confirm) {// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启updateManager.applyUpdate()}}})})updateManager.onUpdateFailed(function() {// 新的版本下载失败wx.showModal({title: '已经有新版本了哟~',content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'})})}})}},

十、上线

微信公众平台 (qq.com)

1.上线前：

（1）可以先点击真机测试，扫二维码在手机上进行调试

（2）登录微信公众平台，完善“设置”里面的基本信息，添加项目人员，上传代码后，可以在“管理”，“版本管理”设置为体验版本，“成员管理”里面添加体验人员，让更多人体验小程序，找出问题。

2.上线

提交代码后，要登录微信公众平台，点击“管理”里面的“版本管理”，拉到最下面的开发版本，点击提交审核

注意：

（1）个人小程序不能涉及社交类（就是用户的数据不能分享），个人制作可以在审核里面注明一下；

（2）微信小程序审核速度很快，本人提交最快在一小时内（中午）完成审核。

如有问题，可以在评论中提出。

微信小程序从云开发到上线相关推荐

微信小程序的云开发以及与传统开发的比较
一.微信小程序的云开发概念云开发就是一套解决小程序前后端开发的一种云端能力它提供了一整套云服务及简单.易用的 API 和管理界面,以尽可能降低后端开发成本,让开发者能够专注于核心业务逻辑的开发.尽 ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
【微信小程序】云开发篇（一）——申请小程序
[微信小程序]云开发篇(一)--申请小程序 [微信小程序]云开发篇(二)--初始化云开发(微信开发者工具) [微信小程序]云开发篇(三)--代码管理 [微信小程序]云开发篇(四)--开通云开发 [微信 ...
微信小程序使用云开发实现微信支付功能报错Error: 签名错误，史上最全解决办法，不服留言骂我
报错背景微信小程序使用云开发实现微信支付功能,但是报错了报错信息报错原因小程序想要使用微信支付,必须满足下面几个条件的 1,必须是非个人小程序(个人小程序用不了支付) 企业小程序需要认证! 2 ...
通过微信小程序的云开发实现留言功能
通过微信小程序的云开发实现留言功能 index.wxml index.wxss index.js 微信小程序中用于解析date的util.js 授权页home.wxml home.wxss home. ...
微信小程序用云开发实现多人聊天2020/05/21
微信小程序用云开发实现多人聊天室微信小程序用云开发实现多人聊天2020/05/21 效果图片 js wxml wxss 微信小程序用云开发实现多人聊天2020/05/21 用微信云开发实现聊天室无 ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
小程序云开发服务器太慢,为什么微信小程序的云开发响应这么慢？
为什么微信小程序的云开发响应这么慢?Why is the response of WeChat applet cloud development so slow?为什么微信小程序的云开发响应这么慢? ...
微信小程序之云开发入门
一.小程序云开发程序的云开发: 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器 ...
微信小程序update云开发数据库的数据时无响应
目录项目场景:在审批端来审批活动信息时候点击审批通过但是并无响应问题描述原因分析解决方案题外话项目场景:在审批端来审批活动信息时候点击审批通过但是并无响应这个小程序是集用户端和审批端为一 ...

微信小程序从云开发到上线