微信小程序开发流程

开发小程序一般流程：

1. 申请小程序帐号
2. 安装小程序开发者工具
3. 开发小程序
4. 提交审核和发布

注册企业账号

注册路径
注册企业账号，分 企业认证 和 微信认证
企业认证 ：需企业打钱到腾讯账户（注册时会提供），但是事后会原额退换，有些关键的api却不能用
微信认证：每年需要花300块钱提交认证 api功能齐全

新建项目

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

小程序代码构成

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件 
.js 后缀的 JS 脚本逻辑文件
1
2
3
4

JSON 配置
注册pages页面
注册底部tabbar
设置window窗口样式
1
2
3
4

官网登录流程图

用户点击获取code编，请求接口，将code码传给后台

需要点击才能 首次加载是不可以触发的 当用户点击一键登录时，就可以做到上面一套流程
wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

后台接受code码，请求微信第三方接口 由官方提供

get请求 需要传四个参数
https://api.weixin.qq.com/sns/jscode2session

'appid': config.appId,//我们的appId  
'secret': config.appSecret,//我们的appSecret
'js_code': req.query.code,//前端传给后台的
'grant_type': 'authorization_code'//固定写死

返回的数据有
1、session_key   （如TRlCliLmFFXop3OmRvDvhQ 每次请求都会变）
2、openid   用户唯一表示   （oukWq5c-vtpR1-hcUtvCP_JZn7Pw 固定不变的）

const jwt = require('jsonwebtoken')
let token = jwt.sign(
        {sessionKey, openid}, //上面返回的
        config.token_key, //配置我们自定义的key
        {expiresIn: 60 * 60 * 24}// 配置登录有效期24小时
    )//将token返回给前端
    
wx.setStorageSync('token',token)//前端存token    
wx.getStorageSync('token')//前端取token    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

想一键获取用户手机号，需要用户授权

下面链接是对应的官方文档

<button 
    open-type="getPhoneNumber" 
    bindgetphonenumber="getPhoneNumber">
</button>

1
2
3
4
5

点击一键登录时触发 这时弹出选择手机号的弹框

getPhoneNumber: function (e) {
   var iv = e.detail.iv
   var encryptedData= e.detail.encryptedData
  var codeObj = "";
  var that = this;  
  wx.login({
    success: res => {  
    const code = res.code
     wx.request({
      url: 'https://你的接口文件路径', //接口地址
      data: {
       appid: "你的小程序APPID",
       secret: "你的小程序appsecret",
       code: code,
       encryptedData: encryptedData,
       iv: iv
      },
      success: function (res) {
          后台解析好的json数据 包括手机号       
     }) 
 
     if (e.detail.errMsg == 'getPhoneNumber:user deny') { //用户点击拒绝       
          wx.navigateTo({
           url: '../index/index',
          })
     } else { //用户点击授权了 进入交互页面
            
     }
    }
   });
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

返回数据

{
    "phoneNumber": "13580006666",//用户绑定的手机号
    "purePhoneNumber": "13580006666",//没有区号的手机号
    "countryCode": "86",//区号
    "watermark":
    {
        "appid":"APPID",
        "timestamp": TIMESTAMP
    }
}
1
2
3
4
5
6
7
8
9
10

上面代码 前端参考链接

上面代码 java解密 encryptedData 和 iv 为手机号 参考链接

想要获取用户的 姓名 昵称 微信头像 省份 城市 性别 国籍 等信息也需要用户验证

wx.getUserProfile({
    desc: '为了方便使用，请求登录。',
    success: (res) => {
      res.userInfo        
      //avatarUrl city country gender language nickName province      
    },
    fail(){
      that.loginSaveToken()
    }
})
1
2
3
4
5
6
7
8
9
10

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/448418