微信小程序

最新推荐文章于 2025-04-28 08:33:19 发布

张凯的工作室

最新推荐文章于 2025-04-28 08:33:19 发布

阅读量313

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/KG_kg_kg/article/details/107707441

版权

本文详细介绍了微信小程序的开发流程，包括开发准备工作、注意事项、用户授权获取信息显示头像、小程序升级、列表操作、登录功能、常用控件的使用以及常见问题。强调了openid和unionid的差异，以及在获取用户信息、授权、合法域名配置、业务域名配置等方面的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序开发流程

1、微信小程序开发准备工作

1、账号openid和unionid

openid是表示用户在你的当前应用中的唯一标示,比如小程序，微信公众号等，这些都算是一个应用，如果你有多个应用，同一个用户的openId可能并不相同

微信小程序用户的唯一识别码是openid，是通过wx.login()接口拿到的，如果用户只在本小程序内操作，不需要将数据同步到其他微信小程序或者第三方平台，并且作为用户的账号，这时候只申请微信公众平台即可。

借用微信官方文档中的话来说，如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的

如果有第三方平台的存在，比如app或者网页通过账号登录，需要和本微信小程序的数据同步，这时候需要申请微信开放平台。

简单来说，只有一个微信小程序和一个微信公众号就用openid就够了，如果多个微信小程序或者第三方平台或者多个微信公众号就用unionid。

openid，不需要服务端写接口，也能获取openid，但是为了保证安全性，一般都放在服务端去获取，通过wx.login获取code把code传到后端接口jscode2session调用获取。

wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        // console.log(res)
        var appid = 'appid'; //填写微信小程序appid 
        var secret = 'appsecret'; //填写微信小程序secret 
 
        //调用request请求api转换登录凭证 
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session?appid='+appid+'&secret='+secret+'&grant_type=authorization_code&js_code=' + res.code,
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            console.log(res.data.openid) //获取openid 
          }
        }) 
      }
    })

unionid是必须服务端写接口的

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/union-id.html

https://blog.youkuaiyun.com/a493001894/article/details/80323403//解密放在本地

微信小程序调用wx.login获取code

用户授权后wx.getUserInfo(）或点击授权按钮后获取encryptedData和iv

 bindGetUserInfo: function (e) {
  
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      wx.showLoading({ title: '加载中…' })
      var that = this;
      //得到用户授权，保存微信用户信息
      console.log("用户的信息如下：");
      console.log(e.detail.userInfo);
       app.globalData.wxuser=e.detail.userInfo
      console.log("encryptedData:"+e.detail.encryptedData);
      console.log("iv:"+e.detail.iv);
      that.setData({ encryptedData: e.detail.encryptedData});
      that.setData({iv:e.detail.iv});

/api/login/wx_jscode2session//获取openid、session_key

/api/login/wx_encryptedData//解密参数session_key，encryptedData，和iv获取uniond和openid

/api/login/wx_login传参uniond和其他参数例如第三方账号

这三个接口是需要服务端去做的，具体说明可以查官网。

2、注意事项

1、绑定微信开放平台需要认证开发者资质，一年300块钱。

2、微信小程序平台账号和微信公众号的账号不能是同一个邮箱。

3、微信公众号跳转小程序需要绑定小程序才能跳转，并且需要配置跳转页面。

4、微信小程序服务端url需要在微信小程序的后台配置合法域名，开发时如果还没配置，需要勾选不校验域名信息。

5、跳转网页，需要配置业务域名，配置业务域名时，需要将一个校验文件放在根目录下，才能配置成功。

6，微信开发者人员微信必须在微信小程序后台绑定。

7，微信小程序首页不能直接是登录页面，大概是17年底出的新政策。当然，如果你没有第三方账号存在，那是不需要登录页面的。

8、微信小程序有大小限制，最好不要超过10兆，具体没有测试过。

9、建议有个良好的保存账号密码的习惯，不要只靠脑子记，所以把账号密码存起来。

10、微信小程序长时间没有人登录注册，是会被锁住的。

11、个人建议谨慎使用缓存，因为进入小程序的途径有很多，微信公众号进入，微信打开，扫描二维码打开，这时候加载缓存如果没写好就可能会有问题。能再获取一遍就再获取一遍，不会有太多耗时的。

3、用户授权获取信息显示头像

个人认为官方给的小程序获取头像信息是最好的，所以显示微信头像尽量使用官方给的流程，会避免很多情况头像显示不正确的情况。但是官方给的微信小程序授权过程是只有用户授权显示用户头像，并没有对不授权处理。写的也是有点不好

wxml,我是写在用户登录页面的


<view class="main">
<view wx:if="{
  {isHide}}"  >
    <view wx:if="{
  {canIUse}}" >
        <view class='header'>
            <image src='/images/logo.png'></image>
        </view>
 
        <view class='content'>
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称，头像等)</text>
        </view>
 
        <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            微信授权
        </button>
    </view>
    <view wx:else>请升级微信版本</view>
</view>

jsonload函数先判断用户是否授权，没有授权显示授权页面，有就可以拿取用户信息

 onLoad: function (options) {
    var that = this;
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {

          wx.getUserInfo({
            success(res) {
              app.globalData.userInfo = res.userInfo;
            }
          })
        } else {
          // 用户没有授权
          // 改变 isHide 的值，显示授权页面
          that.setData({
            isHide: true
          });
        }
      }
    });
  },

  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      var that = this;
      console.log("用户的信息如下：");
      console.log(e.detail.userInfo);
      app.globalData.userInfo = e.detail.userInfo
      that.setData({
        isHide: false,
      });
      wx.login({
        complete: (res) => {
          console.log('openid')
          console.log(res.code)
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid='+"appid"+'&secret='+'secet'+'&grant_type=authorization