为了参加微信小程序开发大赛，了解了微信小程序的开发，在实际的开发过程中遇到了一些问题，以此记录，避免再犯！
简述
刚接触小程序的开发，个人觉得要写好小程序，得熟悉前端开发，因为小程序的编码基于HTML、CSS和JS。只不过在微信中，为了打造微信的生态圈，重新定义了小程序编码。其实质还是和前端开发类似，如果你有了解过NodeJS的开发，那么微信小程序的开发自然不是什么问题。
小程序和前端开发的关系
小程序开发工具文件视图如下：
简而言之有如下的对应关系
pages中放置页面utils放置其他的静态资源等等app.js小程序初始化app.json小程序配置app.wxss小程序的全局样式文件project.config.json项目的配置文件（开发者工具中可视化编辑）
在页面下，有如下的对应关系
| 小程序 | 前端 | 说明 |
|---|---|---|
| WXML | HTML | 基本没啥区别，微信中有自己的组件 |
| WXSS | CSS | 写法完全是一样的 |
| JS | JS | 了解一下NodeJS，动态地去渲染前端 |
| JSON | JSON | 小程序每个Page都有一个同名json文件用于配置信息 |
其实就这么简单，初学者或者入门前端不久的同学，可以看看官方文档的“入门教程”，其实小程序上线还有一些限制的，功能限制于账号主体属性，或者有的小程序不符合价值观的当然也是不能上线。
踩过的坑
说来这个部分才是干货，不得不抱怨一句，一开始拿到的时候还是挺烦的，由于WXML中的各种控件都改了，有的CSS布局不知道出了什么蜜汁问题，然后一通”瞎搞“，也算是弄出来了。
1. 全局变量
全局变量是个好东西（全局变量虽好，切记不可贪杯），给出app.js代码如下：
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
this.globalData.userKeyCode = res.code;
//登陆请求 开发者服务器
wx.request({
url: this.globalData.main_url+'/user/login?code=' + res.code,
success: (res) => {
//获取用户keycode
this.globalData.userinfo_isfinish = res.data.data.is_finish;
console.log(res.data.data.is_finish);
//获取headers
this.globalData.headers.Cookie = res.header["Set-Cookie"];
}
})
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo;
var userinfo_temp = this.globalData.userInfo;
//完善用户信息
if (!this.globalData.userinfo_isfinish){
wx.request({
url: this.globalData.main_url+'/user/finishinfo?nickname='+userinfo_temp.nickName + "&avatar=" + userinfo_temp.avatarUrl + "&gender=" + userinfo_temp.gender + "&city=" + userinfo_temp.city + "/" + userinfo_temp.province,
header: this.globalData.headers,
success: res => {
console.log("微信用户第一次登陆完善信息成功！")
}
})
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
}
})
}
}
})
},
globalData: {
main_url : "http://192.168.43.121/art/public/index",
userInfo: null,
userKeyCode:null,
userinfo_isfinish:true,
headers: {'Cookie': ''},
userLoaction:''
}
})
2.网络请求
这个坑，是在开发过程中向后端请求数据，发现提示没有登陆，原来每次请求都得带上header中的cookie，小程序的网络请求不会自己带上，所有也就导致了服务端并没有接受到正确的session，如上代码，在app.js中保存cookie为一个header的全局变量，每次请求的时候带上这个变量就行了。
全局变量的使用：
//在页面中的js文件中声明
const app = const app = getApp()
//然后在需要的地方写
this.setData({
header: app.globalData.headers
})
3.this.setData不是一个fucntion
出现这个的原因是因为：在函数中this指向的是当前函数的上一级，当我们网络请求success封包函数中这样去给data赋值，就会出现这个错误。
解决方法：
//在任意函数下声明
var that = this;
//然后
that.setData({
code: res.code
})
总结
勤加练习，小程序就会非常熟练了，建议翻阅一下小程序的文档，然后想一个点子，然后去实现它，不会的地方就去看文档，文档就是拿来看的，不是让你背下来，当然背下来编码速度更快一些，假以时日，相信大家都能非常熟练地编写小程序，共勉！
