资讯专栏INFORMATION COLUMN

微信小程序开发之从“跳伞”到“吃鸡”

xingpingz / 1983人阅读

摘要:写在前边微信小程序随着官方开放越多越多的接口,也是变的越来越火了,越来越多的企业已经开始布局小程序生态。这个微信授权的询问弹窗之前的版本中只要调用获取用户信息的,是会自动弹出的,现在小程序做了调整需要自行通过按钮触发,所以这个很蛋疼。

写在前边

微信小程序随着官方开放越多越多的接口,也是变的越来越火了,越来越多的企业已经开始布局小程序生态。所以,对于我们开发者来说,掌握小程序开发显得分外重要。如果点亮了该技能,那么离升职加薪赢取白富美的日子就又近了一步啦!

关于我

笔者算是一个野生的程序猿吧,没有什么大厂经验,搞开发就是一个字,干!从不来虚的。因此,随性的性格造就了我全栈(一窍不通)的本事,做项目那就是一把抓,前后端全包,什么前后端撕逼的问题统统没有了,哈哈哈(想想心里还有点小激动)。不过本文笔者只重点分享小程序开发相关的东西,想了解后端的话,可以坐等我下一次的分享哈哈哈(可能会遥遥无期)。

准备工作

话不多说,进入正题。现在开始分享我是怎么开发完一款小程序的。小程序的官方文档其实写的是很详细很清晰的,相比微信公众号的开发文档来说真的是非常非常的良心,所以开发前浏览一遍开发文档非常关键。下边我罗列一下其他准备工作。

1. 开发工具

工欲善其事,必先利其器,首选的就是把开发环境给弄好咯,我推荐如下:

开发工具

官方微信开发者工具

visio studio code

调试工具

官方微信开发者工具

当然开发工具什么的只要自己习惯就好,我的推荐只是参考。笔者最后习惯是直接在官方的开发者工具上编辑加调试。

2. 小程序配置

这块的内容官方文档都有详细的教程,我就不多补充啦。总体来说就是需要去申请一个开发者账号,然后配置小程序的基本信息,比较值得重点说的就是小程序api的配置,官方要求必须是https。说到这里,如果读者你的api接口已经上了https可以跳过了,如果不是,然后你也像笔者一样是全栈开发,那么笔者将告诉你如何快速让接口踏上https的航班。

是的,没错, 就是它!Certbot

在官网上选好http服务器和linux系统后,按照命令一个一个敲,就ok了,简直不要太简单。哈哈哈,至于想深入了解这个东东的话,可以去了解下Let"s Encrypt

开发

总算可以正式的开始撸功能了!因为考虑到现在程序猿找对象是真的太难了,所以笔者撸的小程序是一个脱单交友的小程序(单身汪的福音哦),小程序页面也不多,核心就是让用户填写个人信息然后展示出来。是的,就是这么简单!

授权登录

小程序的授权登录其实可以看作是两件事情,授权和登录,这两者是可以多带带分开处理的(个人观点,允许反驳)。

授权

对于授权,其实官方已经有讲到,就是换成微信内的授权询问,就是如下这个东西

这个微信授权的询问弹窗之前的版本中只要调用获取用户信息的api,是会自动弹出的,现在小程序做了调整需要自行通过按钮触发,所以这个很蛋疼。那么需要怎么去设计呢,这里也有两个方案,一个是做个多带带的页面,另一个方案是做弹窗。个人建议是选方案一,因为这样可以把授权逻辑从页面逻辑里独立出来,方便所有页面渲染前调用。具体coding如下:

在app.js中,判断是否已经授权,如果未授权则跳转到授权页面

App({
  onLaunch: function () {
    ...
    wx.getSetting({
      success: res => {
        if (res.authSetting["scope.userInfo"]) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          console.log("已经授权")
        } else {
              // 未授权,跳转到授权页面,必须要用reLauch进行跳转
          wx.reLaunch({
            url: "/pages/auth/index",
          })
          console.log("需要授权")
        }
      }
    })
  },

在"pages/auth/index.wxml"页面中,使用button做授权按钮

"pages/auth/index.js"中定义绑定的回调方法,重新跳转回上一页

Page({
  ...
  // 点击授权后跳回首页
  bindGetUserInfo (e) {
    wx.reLaunch({ url: "../index/index" })
    // 用户已经同意小程序使用获取用户信息功能,后续调用 wx.startRecord 接口不会弹窗询问
  }
})

这样,一个授权逻辑就完成了。

登录

登录的目录其实是和后端交互,需要在服务器端存储当前用户的标识,以便用户下一次登录时服务器知道是谁登录了。做过微信公众号开发的朋友应该都知道,能承担这个作用的角色就是open_id了,所以要实现登录的话,其实就是需要获取当前用户的open_id,官方文档中是这么介绍的:

1.小程序调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
2.开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

所以完成登录的前提就是需要后端提供一个接口,咱们把code传给后端就行了,剩下的工作就是后端去完成啦。

App({
  onLaunch: function () {
    // 授权判断
    wx.getSetting({
      success: res => {
        if (res.authSetting["scope.userInfo"]) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          console.log("已经授权")
        } else {
              // 未授权,跳转到授权页面,必须要用reLauch进行跳转
          wx.reLaunch({
            url: "/pages/auth/index",
          })
          console.log("需要授权")
        }
      }
    })
  },
  // 登录
  wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if (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()方法发起请求比较麻烦,还需要处理会话逻辑,所以建议读者们还是进行一次封装,下边贴上笔者的代码:

utils文件夹中创建request.js文件

const domain = "https://domain.com" // 接口域名
function GET(url, params) {
  return request("GET", url, params)
}
function POST(url, params) {
  return request("POST", url, params)
}
function request(method, url, params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: domain + url,
      data: params,
      method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        "Authorization": "bearer" + " " + wx.getStorageSync("access_token"),
      },
      success(res) {
        if (res.data.code === 100) {
          let resData = res.data.data
          if (!resData) {
            resData = ""
          }
          resolve(resData)
        } else {
          let err = {
            code: res.data.code,
            msg: res.data.msg
          }
          reject(err)
        }
      }
    })
  })
}

module.exports = {
  get: GET,
  post: POST
}

使用

const api = require("../../utils/request")
...
api.post("/user/mplogin", { "code": res.code }).then(res => {
     wx.setStorageSync("access_token", res.access_token)
 }).catch(error=>{
   console.log(error)
 })

至此,登录逻辑便已完成,是不是觉得小程序开发也不过如此呢?由于篇幅有限,今天就分享到这啦,后续我将继续和看官们一起探究以下小程序开发的话题

图片上传

表单提交

级联选择器的实现

如何使用iconfont图标

微信支付

模板消息

....

欢迎看官们持续关注,也欢迎看官们私信告知我其他疑问,我尽量都一一分享,知无不言,言无不尽。

不是结束的结语

打波小小的广告,个人开发的找对象小程序“佛系处对象”已经顺利上线,欢迎读者看官们扫码体验,如果脱单了记得通知我哟!

最后祝大家在事业和爱情的“战场”中都能脱颖而出,顺利吃鸡!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58053.html

相关文章

  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    seanlook 评论0 收藏0
  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0
  • 干货:小程开发文档和设计指南要点详解

    摘要:本文主要对微信官方发布的开发文档和设计指南进行详解小程序开发文档小程序开发方式的整体介绍,并提供了一个官方范例。一小程序开发文档文档中开头即提到支持调用微信原生,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。 本文主要对微信官方发布的开发文档和设计指南进行详解: 小程序开发文档 小程序开发方式的整体介绍,并提供了一个官方范例。如果是受邀体验的开发者,可以扫码进行小...

    blair 评论0 收藏0
  • 微信小程开发由01开发,快速开发上线

    摘要:首先先注册微信小程序管理一登录微信公众平台二点击立即注册。注意这里不要用微信公众号登录,小程序账号和微信公众号是不同的。最好从项目直接入手,这里有微信小程序个例子,链接密码有可能会过期,留言或者加我,给你最新的 首先先注册微信小程序管理 一、登录微信公众平台https://mp.weixin.qq.com 二、点击立即注册。 注意:这里不要用微信公众号登录,小程序账号和微信公众号是不...

    seal_de 评论0 收藏0
  • 微信小程开发由01开发,快速开发上线

    摘要:首先先注册微信小程序管理一登录微信公众平台二点击立即注册。注意这里不要用微信公众号登录,小程序账号和微信公众号是不同的。最好从项目直接入手,这里有微信小程序个例子,链接密码有可能会过期,留言或者加我,给你最新的 首先先注册微信小程序管理 一、登录微信公众平台https://mp.weixin.qq.com 二、点击立即注册。 注意:这里不要用微信公众号登录,小程序账号和微信公众号是不...

    CrazyCodes 评论0 收藏0

发表评论

0条评论

xingpingz

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<