有了云开发我们不仅可以方便的获取到用户的openid，还可以通过云开发的数据库来存储用户信息，进而实现小程序用户的登陆与注册功能。 本节知识点 1，云开发的使用 2，云函数的使用 3，云数据库的使用 4，用户登陆 5，用户注册 涉及到三个页面 1，登陆页面 [图片] 2，注册页面 [图片] 3，登陆成功 [图片] 下面来看具体的代码实现 一，注册页面实现 1,register.wxml [代码]<!--pages/register/register.wxml--> <input class='input' placeholder='请输入用户名' bindinput='inputName'></input> <input class='input' placeholder='请输入密码' bindinput='inputPassword'></input> <input class='input' placeholder='请输入电话' bindinput='inputPhone'></input> <input class='input' placeholder='请输入地址' bindinput='inputAddress'></input> <button class='button' type='primary' bindtap='register'>注册</button> [代码] 2,register.js 需要注意的是我们注册时需要使用到云开发数据库，在使用云开发数据库之前还需要初始化云开发，代码里都有注释 [代码]// pages/register/register.js let app = getApp(); // 获取数据库引用 const db = wx.cloud.database(); const userListDB = db.collection('userlist'); let name = null; let password = null; let phone = null; let address = null; Page({ /** * 页面的初始数据 */ data: { }, //输入用户名 inputName(evnet) { name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //输入手机号 inputPhone(evnet) { phone = evnet.detail.value; }, //输入地址 inputAddress(evnet) { address = evnet.detail.value; }, //注册 register() { let that = this; if (!app.checkNamePassword(name, password)) { return; } if (!app.checkPhoneAddress(phone, address)) { return; } //查询用户是否已经注册 userListDB.where({ _openid: app.globalData.openid // 填入当前用户 openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user && user.name) { wx.showModal({ title: '提示', content: '您已注册，确定要更新账号密码吗？', success: function(res) { if (res.confirm) { console.log('用户点击确定') that.saveuserinfo(); } } }) } } else { that.saveuserinfo(); } } }) }, saveuserinfo() { let that = this; userListDB.doc('_openid').set({ data: { name: name, password: password, phone: phone, address: address } }).then(res => { app.showTips('注册成功'); }) }, }) [代码] 3，在app.js里初始化云开发 下面的prod-8aa9a5就是我们云开发的环境id [代码]//app.js App({ onLaunch: function() { //云开发初始化 wx.cloud.init({ env: 'prod-8aa9a5', traceUser: true }) } }) [代码] [图片] 4，注册成功后，我们在云开发控制台的数据库里就可以看到注册信息了。 [图片] 二，注册成功后，就要实现登陆功能了 我们这里的登陆功能需要用到第一步注册时的用户名和密码，也就是上图数据库里的name和password字段 1，登陆页面实现代码 login.wxml [代码]<!--pages/login/login.wxml--> <input class='input' placeholder='请输入用户名' bindinput='inputName'></input> <input class='input' placeholder='请输入密码' bindinput='inputPassword'></input> <button class='button' type='primary' bindtap='login'>登陆</button> <button class='button' type='primary' bindtap='register'>去注册</button> [代码] 2,登陆功能实现 [代码]// pages/login/login.js let app = getApp(); // 获取数据库引用 const db = wx.cloud.database(); const userListDB = db.collection('userlist'); let name = null; let password = null; Page({ data: { }, //输入用户名 inputName(evnet) { console.log(evnet.detail.value) name = evnet.detail.value; }, //输入密码 inputPassword(evnet) { password = evnet.detail.value; }, //登陆 login() { let that = this; if (!app.checkNamePassword(name, password)) { return; } //登陆获取用户信息 userListDB.where({ _openid: app.globalData.openid }).get({ success: function(res) { let userInfos = res.data; console.log(res.data) if (userInfos && userInfos.length > 0) { let user = userInfos[0]; if (user.name !== name) { app.showTips('用户名不匹配'); } else if (user.password !== password) { app.showTips('密码不匹配'); } else { app.showTips('登陆成功'); let jsonStr=JSON.stringify(user); wx.navigateTo({ url: '../index/index?jsonStr=' + jsonStr, }) } } else { app.showTips('用户不存在'); } } }) }, register() { wx.navigateTo({ url: '../register/register', }) }, }) [代码] 3，登陆成功后显示用户信息 电话号码是胡乱填的，想联系我可以__加我微信2501902696__ [图片] 这样就可以实现小程序的登陆与注册了。 想要完整源码或者有小程序相关的问题，可以加我微信2501902696（备注小程序）

一、获取formId 相信使用过小程序的同学，多少都收到过小程序的通过消息，如下： [图片] [图片] 这类通知消息，是和好友消息一样展示在微信的聊天列表中，所以，点击率还是比较高的。想实现这种小程序的模板消息，就必须要获取用户的formid才可以（如何发消息，请仔细查阅小程序官方文档） 我们来说一下如何获取formId： a、必须通过form组件提交才能获取到formId; b、给form组件设置report-submit="true"属性; c、给form组件添加bindsubmit事件绑定，携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}; d、必须用户手动触发提交表单，不能JS模拟提交，所以，页面上必须要有提交按钮; 看一下示例代码： <form report-submit=‘true’ bindsubmit=‘userSubmit’> <button class=‘button’ bindtap=‘copy’ form-type=‘submit’>复制</button> </form> 以上示例就可以在userSubmit里获取到formId了： userSubmit: function (e) { console.log(e.detail.formId); }, 需要注意一点，开发工具里面是没办法查看到真实的formId的，会是这样一句提示"the formId is a mock one"，提交给服务端就可以拿到了~ 最暴力的方式：整个页面最外层套一个button，点击页面任何地方，都可以获取到formId 二、区分转发的是群聊还是好友 这个其实就是场景值的判断，先看一张图： [图片] 上图可以看出，从好友聊天窗口和群聊窗口点击小程序卡片后，场景值是不一样的，分别是1007和1008，所以，我们可以在app的onLuanch或者onShow方法中去获取到scene值，这样就能知道用户是通过哪种方式进入小程序的~ 之前分享成功，可以获取群ID，这种方式已经被微信官方禁掉了。可以看这篇文章： 三、有哪些开源的小程序框架 wepy wepy是最早推出的一款小程序框架，基于vue进行封装，作者龚澄是腾讯的工程师，早期集累了很多习惯使用vue进行开发的小程序人员。github地址：https://github.com/Tencent/wepy mpvue mpvue也是一个使用 Vue.js 开发小程序的前端框架，美团点评下的一个部门开发的，有胡成全带队开发。github地址：https://github.com/Meituan-Dianping/mpvue taro Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。统于有一款使用React语法开发小程序的框架了，github地址：https://github.com/NervJS/taro 以上三个框架，都有自己的官方交流群，大家可以添加对应的小助手，然后会自动拉你进群。

1、wx.setStorageSync和wx.getStorageSync报错问题 为什么说这个问题，是因为这个API确实会报错，并且调用越频繁，报错会越多，先看一下截图： [图片] 所以，怀疑微信官方API也有出错的机率，这里没有根治的办法，只能做一些缓解报错次数的办法：减少调用频次，不要在公用方法里面去频繁调用set和get本地缓存；添加try catch，出错之后，可以再调用一次或多次，减少报错的可能性~ **2、picker下拉列表为什么获取不到长度 ** [图片] 如上图，如果是设置了key的数组，会发现，此时的array的length是0，这可能是小程序的一个bug，length只能自己处理了~ 3、如何获取音频文件的长度 如果调用的是新API，wx.createInnerAudioContext可以直接获取duration；如果是低版本，调用wx.startRecord方法时，只能自己写个计数器来处理duration了。 在部分机型上会有个蛋痛的问题，自己写个定时器，和微信内部录音的时间对不上，当录音600秒（十分钟）时，会相关1~3秒。并且在部分安卓手机上，InnerAudioContext.stop()不会自动调用，需要手动去调用stop 4、如何获取微信群名称？ 小程序中是没办法直接获取到微信群名称，只有一种方法获取open-gid，然后再通过open-data组件来显示群名称： <open-data type=“groupName” open-gid=“xxxxxx”></open-data> open-gid的获取方法： 用户把小程序分享到微信群，会在分享成功后返回shareTickets(因为可以分享到多个群，所以这里是一个数组); 如果用户是从群内点击的小程序卡片，会在小程序的app.onshow里面获取了shareTicket。拿到shareTicket后，再到服务端解密，就可以拿到open-gid~ 5、小程序最多支持多少个节点？ 小程序可以理解为，被微信包装了一层的H5，页面会有最大节点，建议不要在页面做无限翻页，或者超大数据渲染，这些都可能导致小程序崩溃（如果内存不够时，微信优先杀掉小程序）。 [图片] 节点数过多时，就直接报错了：invokeWebviewMethod 数据传输长度为 1233778 已经超过最大长度 1048576 1048576是个神奇的数字，大家可以自行百度~ 待续…

1、域名必须是HTTPS 小程序后台配置的域名，有服务器域名、业务域名、消息推送域名、普通二维码域名，前三者必须是HTTPS域名，普通二维码域名可以是HTTP域名 2、input组件placeholder字体颜色 写在placeholder-class里面的color并不生效，需要写在placeholder-style里面就可以了 3、wx.navigateTo跳转不生效？ 带有tabbar的页面，必须使用wx.switchTab进行跳转 4、tabbar在切换时页面数据无法刷新 tabbar的实现可能是显示和隐藏view，所以，不会一直调用page.onLoad()方法，可以尝试把代码逻辑写在page.onShow()里面，或者在onTabItemTap方法中处理 5、如何获取shareTickets（可以解密微信群ID） 获取shareTickets需要在app.onLaunch或者app.onShow里面才能获取到，而不是page.onShow，请一定要注意。 注：建议在app.onShow里面去获取，app.onLaunch不是一直会执行 6、getPhoneNumber获取手机号 目前该接口针对非个人开发者，且完成了认证的小程序开放。个人开发者是没办法调用这个API的 7、wx.previewImage图片预览 预览的图片URL必须是HTTPS开头，不能是本地图片 8、wx.playVoice音频播放 必须保证音频文件已经在本地，比如在wx.startRecord后，可以获取到本地临时的tempPath。或者提前调用wx.downloadFile来下载资源文件，然后再播放 9、API老版本兼容 可以用wx.canIUse或者wx.getSystemInfoSync来获取version和SDKversion进行判断，老版本给出相应提示即可 10、获取系统信息 wx.getSystemInfo，可得到系统语言、屏幕宽高、微信版本号、操作系统、设备像素比、客户端甚础库版本等信息 11、如何去掉自定义button灰色的圆角边框 主要是button的伪元素设置了样式，去掉即可： button::after{ display: none;} 12、回到页面顶部 回到页面顶部，有两种方式： 1、使用scroll-view设置为纵向滚动，然后设置scroll-top值； 2、使用wx.pageScrollTo方法，此方法是1.4.0开始支持，所以要做低版本兼容； 13、textarea是APP的原生组件，层级最高 这是个大坑，在有textarea的页面，不要做弹出框设计，建议在输入大段文本时，单独成一个新页面。 14、image组件底部有间隙 image组件默认底部会有间隙，可以设置为块元素（display: block），也可以设置vertical-align: top; 15、一段文字如何换行 小程序中唯一可以实现换行的标签组件是text 注：text中不支持<br>，只能使用\n进行换行 16、设置最外层标签的margin-bottom在IOS下不生效 margin-bottom在安卓和开发工具里面都正常，就是在IOS下不起效，建议改成padding-bottom 17、小程序中canvas的图片不支持base64格式 base64格式图片，在开发工具里面可以正常显示，真机上没有显示。建议修改成带https开头的url形式 18、删除体验版，仍然有缓存？ 开发过程中，可能会遇到，删除小程序的体验版，但是缓存依然存在。建议把开发版和线上版都删除，因为小程序缓存是共用的。 19、开发者工具无法复制、粘贴代码 开发者工具中，经常会遇到无法复制、粘贴、搜索代码，有时还会出现，在A文件输入，内部跑到了B文件中，大写的尴尬。遇到这种情况，建议重启微信开发者工作。 20、小程序告警群 小程序后台可以查看所有错误信息，但是，为了方便第一时间了解错误报警，建议使用官方“客户端告警群”，如下图。告警的阀值，可以自己设置。 [图片] [图片] [图片]