微信小程序开发笔记-实战之开发（二）

太过爱你忘了你带给我的痛 2022-12-09 01:51 392阅读 0赞

# 一.开始 #

上一步将准备工作做好之后   会发现模板之中已经有写好的js  所以幸福啊  我们要做的就是修修改改  测试下没问题就可以上线了

结构如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ_size_16_color_FFFFFF_t_70][]

pages里面的就是各个页面的内容

# 二.开发 #

由于下载下来的模板  大部分js  都已经帮我们写好了  因此  我们只需要修改  自己的接口  或者 业务逻辑即可

我在修改的时候  主要遇到的问题就是一个登录信息的获取

### 1） 登录信息的获取 ###

由于微信修改了用户信息的获取  因此还需要制作弹框 让用户授权才行  因此  我们只需要一个唯一标识openid  不需要那样

只需要新写接口获取openid入库就行

> //onLoad为预加载函数  初次进入加载  且 只加载一次
> 
> onLoad: function () \{
> 
> var self=this;
> 
> wx.login(\{
> 
> success(res) \{
> 
> //js调用登陆命令获取到code
> 
> if (res.code) \{
> 
> //通过code调用自己服务接口获取到openid
> 
> wx.request(\{
> 
> url: '此处为自己接口路径例如http://127.0.0.1:8001/user/getOpenId,后期上线修改为域名',
> 
> data: \{
> 
> code: res.code
> 
> \},
> 
> success:function(wxInfo)\{
> 
> console.log(wxInfo);
> 
> //self.data.openid = wxInfo.data.openid
> 
> users.openid = wxInfo.data.openid;
> 
> self.getPerson();
> 
> \}
> 
> \})
> 
> \} else \{
> 
> console.log('登录失败！' + res.errMsg)
> 
> \}
> 
> \}
> 
> \})
> 
> \},
> 
> //入库用户信息操作
> 
> getPerson:function()\{
> 
> var sendData = \{\};
> 
> sendData.openid = users.openid;
> 
> //此处为自己封装的调用函数
> 
> api\['OpreateUser'\](sendData).then((res) => \{
> 
> console.log("==========>openid保存成功");
> 
> \}).catch(() => \{
> 
> wx.showToast(\{
> 
> duration: 3000,
> 
> title: "出错了",
> 
> icon: 'none',
> 
> \})
> 
> \});
> 
> \}

接口中需要注意的是调用微信获取openid接口  为https  不可前端直接调用  因为上线的时候  需要配置允许访问的域名  官方不允许配置[https://api.weixin.qq.com][https_api.weixin.qq.com]，所以只能后台接口调用后返回给前端

[https://api.weixin.qq.com/sns/jscode2session?appid=你的APPID&secret=你的SECRET&js\_code=][https_api.weixin.qq.com]wx.login返回的code[&grant\_type=authorization\_code][https_api.weixin.qq.com]

# 三.结语 #

自己本地测试好后  就可以准备发布上线了  想想还有点小激动

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ_size_16_color_FFFFFF_t_70]: /images/20221123/eefafe857af04002b20ae4fc16eb46ce.png
[https_api.weixin.qq.com]: https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code