文章目录
一、创建项目二、云函数三、静默登录四、获取用户信息五、使用缓存六、同页面数据操作七、不同页面数据传递八、页面跳转九、检查版本更新十、上线 前段时间自己做了一个云开发微信小程序,发现并不复杂,有前端基础的可以试一下。这里主要简单说明一下开发过程,更多内容可以在其他地方查看资料。
微信开放文档 ()
一、创建项目
1.使用微信小程序新建项目
(1)小程序注册,获取AppID
点击该链接,注册完成后,登录后点击“开发”,“开发设置”,找到”开发者ID“里面”AppID“
小程序 ()
(2)开发者工具
打开开发者工具,扫码登录后,点击新建项目,修改项目信息。主要填入自己的AppID和选择云开发。
可以不用一开始就选择云开发,后面可以再修改。
下载地址 稳定版 Stable Build | 微信开放文档 ()
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": "日志"}]},
此处推荐猫一宁的视频
【云开发+源码】(上) 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: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~'})})}})}},
十、上线
微信公众平台 ()
1.上线前:
(1)可以先点击真机测试,扫二维码在手机上进行调试
(2)登录微信公众平台,完善“设置”里面的基本信息,添加项目人员,上传代码后,可以在“管理”,“版本管理”设置为体验版本,“成员管理”里面添加体验人员,让更多人体验小程序,找出问题。
2.上线
提交代码后,要登录微信公众平台,点击“管理”里面的“版本管理”,拉到最下面的开发版本,点击提交审核
注意:
(1)个人小程序不能涉及社交类(就是用户的数据不能分享),个人制作可以在审核里面注明一下;
(2)微信小程序审核速度很快,本人提交最快在一小时内(中午)完成审核。
如有问题,可以在评论中提出。