《微信小程序开发指南》之开发环境搭建
1.1 微信小程序简介
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
思考：为什么微信小程序这么流行呢？
- 首先，对于一个初创公司而言，前期一般为了验证某商业模式是否可行，标准的的研发团队比较费钱，至少需要：
- iOS研发一个，Android研发一个，UI设计师一个，产品经理一个，后端研发一个
- 而开发一个微信小程序只需要：
- 前端微信小程序研发一个，UI设计师一个，产品经理一个，后端研发一个
- 当然，如果长远来看，想做大做强，还是采用标准的研发团队开发原生应用比较好，不受各种限制还可以提供更强大功能。
- 微信小程序不仅可以跨平台，而且不用考虑安卓各种机型和不同尺寸设备的适配性问题。
- 微信小程序比移动端浏览器查看网站/使用 H5 App 的用户体验更好, 更接近原生 App 的用户体验
- 坐拥微信十几亿用户, 可以很方便分享转发使用，无需下载，热更新，拥有更好的安全性。
1.2 微信小程序注册
在开始之前需要准备一个未注册过微信公众号的邮箱
- 如果手里没有合适的邮箱账号，可以去 163邮箱注册一个
- PS: 给163 邮箱一个大大的赞，申请注册很方便。
打开微信小程序注册页面， 按照要求填写信息进行注册。
PS: 点击“注册”后打开你的邮箱你会发现有个激活链接，点击打开激活成功就可以了。
1.3 登录微信小程序后台进行设置
登录 https://mp.weixin.qq.com 后，就可以在菜单 “设置”-“开发-开发管理-设置” 看到我们小程序的 AppID 了 ，这里首次需要生成 AppSecret 密钥。
这里：千万要记下 AppID(小程序 ID)和 AppSecret(小程序密钥)这里后端开发到时候需要。
- 微信小程序后台已经迭代了很多版本，早期是在设置，开发设置中可见。
1.4 工欲善其事，必先利其器
说了这么多，怎么开发微信小程序呢？
微信官方提供了 小程序官方开发工具
打开下载地址后，可以看到有多个下载类型，一般建议下载稳定版本
1.6 新建一个 Hello World 微信小程序
- 软件安装成功后，首次打开可能是这样一个界面，我们选择小程序项目中的小程序。
- 然后依次填写项目的名称，项目保存的路径等信息
- 值得注意的是我们这里只是开发学习，这里勾选用测试号即可。
- 以后想让别人使用我们开发的小程序再用我们的AppID即可。
- 开发模式，有两个选项，小程序和插件，我们这里肯定选择小程序。
- 后端服务选项，这里我们选择不使用云服务，因为我们为了学习，暂时先这样选。
- 模板选项，建议我们选择 JavaScript 基础版来学习，以后高级教学再选 TypeScript 基础模板或使用其他高级模板。
项目打开后可以看到类似如下的文件目录：
为了更好学习和理解，我们现在计划将输出的 Hello world 变成，Hello World,小程序！
我们只需要将 index.js 中的 motto 绑定的字符串，改下即可。
修改后的完整代码如下所示：
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World,小程序',
userInfo: {
},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
然后，点击编译，再点击真机调试
这里有一个吐槽的地方：
- 如果对代码进行了修改，直接点击真机调试，结果执行的还是修改前的代码，需要先点击下编译才行。。。
- 也不知道微信官方什么时候会修复这个 bug.
然后会弹出来一个二维码，用微信扫一扫，即可打开类似如下的界面：
到这里你会发现，和预览的效果不一样。。。
按说应该和预览的效果一样，把微信的头像和昵称加载出来才对。
但是实际上以前可以，现在并不能了，为什么呢？
现在明白了么？官方给的示例代码其实是过时的。
- 早期，可以在小程序启动时候获取用户的头像和昵称，后来被禁用了。 后来要求，点击按钮授权后才可以获取用户和昵称，如今也被禁用了。
- 现在，想要获取微信小程序昵称和头像的获取需要手动选择，变得更加麻烦了。。。
- 这里暂时不用细究，先有个大致印象即可，下篇博文我们分享如何使用微信授权登录建立我们的账号体系全流程。
1.5 有哪些值得推荐的学习微信小程序的学习资源呢？
- 查看微信小程序官方文档
- 看实体书或电子书
比如黑马程序员出品的《微信小程序开发实战》 - 跟着博主的专栏一起学习
本篇完～
下篇将分享 《微信小程序开发指南》之微信授权登录实战。