微信小程序的开发流程

拼搏现实的明天。 2023-06-16 14:59 36阅读 0赞

1.在微信公众平台上，注册一个小程序账号。根据注册指引填写相应信息，提交相应的资料。（准备好一个私人邮箱）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70]  
2.如果你有认证过的微信公众号，可以直接在公众号后台迅速创建小程序，选择小程序管理——快速注册并认证小程序就行了。  
在菜单“设置”-“开发设置”中你会看到小程序的 AppID 。小程序的 AppID 相当于小程序平台的一个身份证。  
3.接下来，你就要使用工具来制作小程序主体了  
安装微信官方开发者工具新建小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个名字，再勾选“创建 QuickStart 项目”，就可以开始制作自己的小程序了。有什么不懂的，可以参考开发者官方文档。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70 1]补充知识点  
微信小程序获取用户信息的两种方式  
wx.getUserInfo与open-data  
onLoad: function (options) \{  
var that = this;  
//获取用户信息  
wx.getUserInfo(\{  
success: function (res) \{  
console.log(res);  
that.data.userInfo = res.userInfo;  
that.setData(\{  
userInfo: that.data.userInfo  
\})  
\}  
\})  
\},  
wx.getUserInfo需要用户授权scope.userInfo，也就是那个授权弹窗  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70 2]  
重点来了，自从微信接口有了新的调整之后 这个wx.getUserInfo()便不再出现授权弹窗了，需要使用button做引导~

授权登录  
请升级微信版本  
js：  
Page(\{  
data: \{  
canIUse: wx.canIUse(‘button.open-type.getUserInfo’)  
\},  
onLoad: function() \{  
// 查看是否授权  
wx.getSetting(\{  
success: function(res)\{  
if (res.authSetting\[‘scope.userInfo’\]) \{  
// 已经授权，可以直接调用 getUserInfo 获取头像昵称  
wx.getUserInfo(\{  
success: function(res) \{  
console.log(res.userInfo)  
\}  
\})  
\}  
\}  
\})  
\},  
bindGetUserInfo: function(e) \{  
console.log(e.detail.userInfo)  
\}  
\})  
是想展示用户信息的话，那便使用open-data 吧，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191126235225826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191126235504609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191127000130121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019112700045282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ1MTcwNQ==,size_16,color_FFFFFF,t_70