写在前面。随着越来越多接口的正式开放，微信小程序也越来越受欢迎。越来越多的企业开始布局小程序生态。因此，对于我们开发者来说，掌握小程序的开发是极其重要的。点亮这个技能，你就离升职加薪拿下白富美的日子又近了一步！关于我作者是一个狂野的程序员，没有任何大厂经验，开发就一个字，做！绝不假。因此，我随性的性格造就了我的全栈（知识渊博）能力。自己做项目的时候，就这么抓，把前后端都盖了，前后端的问题都没有了，哈哈哈（想想还是有点小激动）。不过本文作者只着重分享小程序开发相关的东西。想知道后端的可以等我下一次的分享哈哈哈（可能比较远）。准备工作不多说，进入正题。下面分享一下我是如何开发一个小程序的。小程序的官方文档其实写的很详细也很清楚。对比微信公众号的开发文档，真的是非常良心了，所以开发前浏览一下开发文档非常重要。下面我列出其他的准备工作。1.开发工具工欲善其事，必先利其器。第一选择是弄好开发环境。我推荐以下：开发工具官方微信开发者工具visiostudio代码调试工具官方微信开发者工具当然开发只要你习惯了这些工具，我的推荐只是一个参考。笔者最后的习惯是直接在官方开发者工具上编辑调试。2、关于小程序配置的内容，官方文档中都有详细的教程，我就不多加了。一般来说，需要申请一个开发者账号，然后配置小程序的基本信息。值得一提的是小程序API的配置。官方要求必须是https。说到这里，如果各位读者的api接口已经安装了https，可以略过。如果没有，那么你和笔者一样是全栈开发，那么笔者会告诉你如何快速让接口走上https的航程。对，没错，就是这样！Certbot在官网选择好http服务器和linux系统后，按照命令一一执行，就ok了。这不是太简单。哈哈哈，如果你想了解更多这玩意，可以去了解一下Let'sEncrypt的开发情况，终于可以正式开始推出功能了！考虑到现在程序员真的很难找对象，所以我推出的小程序是一个单身交友的小程序（单身的福音）。小程序页面不多，核心是让用户填写个人信息，然后展示。是的，就这么简单！授权登录小程序的授权登录其实可以看成是授权和登录两个东西，可以分开处理（个人意见，允许反驳）。授权关于授权，其实官方已经提到了，就是代替微信中的授权查询，就是下面这个东西。上一版微信授权的查询弹窗，只要调用获取用户信息的接口，就会自动弹出。现在小程序调整好了，还需要按钮自己去触发，所以这个很蛋疼。那么我们如何设计呢？这里也有两种选择，一种是做单独的页面，另一种是做弹窗。我个人的建议是选择方案1，因为这样可以将授权逻辑和页面逻辑分离，方便所有页面在渲染前调用。具体编码如下：在app.js中判断是否已经授权，如果没有则跳转到授权页面App({onLaunch:function(){...wx.getSetting({success:res=>{if(res.authSetting['scope.userInfo']){//已授权，可直接调用getUserInfo获取头像昵称，无需弹出console.log('authorized')}else{//未授权，跳转到授权页面，必须使用reLauch跳转wx.reLaunch({url:'/pages/auth/index',})console.log('Authorizationrequired')}}})},in'pages/auth/index.wxml'在页面中使用按钮作为授权按钮微信账号授权登录在'pages/auth/index.xml中定义绑定的回调方法js',重新跳转到上一页Page({...//点击授权后跳转到首页bindGetUserInfo(e){wx.reLaunch({url:'../index/index'})//用户已经同意使用小程序获取用户信息功能，后续调用wx.startRecord接口不会弹窗询问}})这样一个授权逻辑就完成了。登录目录其实就是在和后台交互，服务器端需要保存当前的用户ID，这样用户下次登录的时候，服务器就知道谁登录了。做过微信的朋友公众号开发应该知道可以承担这个角色的角色是open_id，所以为了登录，其实需要获取当前用户的open_id。官方文档中是这样介绍的：1、小程序调用wx.login()获取临时登录凭证码，回传给开发者服务器。2.开发者服务器交换唯一用户标识openid和会话密钥session_key的代码。之后，开发者服务器可以根据用户ID生成自定义登录状态，用于后续业务逻辑中前后端交互时识别用户身份。所以完成登录的前提是后台需要提供接口，我们只需要将代码传递给后台即可，剩下的工作由后台完成。App({onLaunch:function(){//授权判断wx.getSetting({success:res=>{if(res.authSetting['scope.userInfo']){//已经授权，可以直接调用getUserInfo获取头像昵称，不会弹出console.log('authorized')}else{//未授权，跳转到授权页面，必须使用reLauch跳转wx.reLaunch({url:'/pages/auth/index',})console.log('Authorizationrequired')}}})},//登录wx.login({success:res=>{//发送res.code到后台换取openId,sessionKey,unionIdif(res.code){api.post('/user/mplogin',{'code':res.code}).then(res=>{wx.setStorageSync('access_token',res.access_token)}).catch(error=>{console.log(error)})}else{console.log('登录失败!'+res.errMsg)}}})这里需要说的是会话维护方案，就是如何让服务器知道谁在访问接口。作者提供了两种方法：使用wx.request()在header中强制组装cookie字符串，达到在传统浏览器上使用cookie维持会话的效果。使用access_token。比如jwt的作者就选择了第二种方式。通过终端上的登录接口返回token，然后将token存储在Storage中，然后在发起请求时将token封装到http请求体中。两种方案都是可行的，读者可以根据自己的情况自行实现。由于wx.request()方法发起请求比较麻烦，还需要处理session逻辑，建议读者进行封装，下面贴上作者的代码：在utils文件夹下创建一个request.js文件constdomain="https://domain.com"//接口域名functionGET(url,params){returnrequest('GET',url,params)}functionPOST(url,params){returnrequest('POST',url,params)}functionrequest(method,url,params){returnnewPromise((resolve,reject)=>{wx.request({url:domain+url,data:params,method:method,//OPTIONS,GET,HEAD、POST、PUT、DELETE、TRACE、CONNECTheader:{'Content-Type':'application/x-www-form-urlencoded','Authorization':'bearer'+''+wx.getStorageSync('access_token'),},success(res){if(res.data.code===100){letresData=res.data.dataif(!resData){resData=''}resolve(resData)}else{leterr={代码：res.data.code，味精：res.data.msg}拒绝（错误）}}})})}module.exports={get:GET,post:POST}使用constapi=require('../../utils/request')...api.post('/user/mplogin',{'code':res.code}).then(res=>{wx.setStorageSync('access_token',res.access_token)}).catch(error=>{console.log(error)})在这里，记录in逻辑已经完成了，你以为小程序的开发无非就是这样吗？由于篇幅有限，今天就分享到这里。我将继续与读者一起探讨以下小程序开发主题。iconfont图标微信支付模板消息怎么使用...欢迎各位书友继续关注，其他问题也欢迎私信告诉我。我会尽力一一分享。！
