為了參加微信小程序開發(fā)大賽婆跑，了解了微信小程序的開發(fā)店乐，在實際的開發(fā)過程中遇到了一些問題，以此記錄侄泽，避免再犯！
簡述
小程序的開發(fā)官方文檔鏈接：小程序開發(fā)API
我的代碼倉庫：Github
剛接觸小程序的開發(fā)蜻韭，個人覺得要寫好小程序悼尾，得熟悉前端開發(fā)，因為小程序的編碼基于HTML肖方、CSS和JS闺魏。只不過在微信中，為了打造微信的生態(tài)圈俯画，重新定義了小程序編碼析桥。其實質(zhì)還是和前端開發(fā)類似，如果你有了解過NodeJS的開發(fā)活翩，那么微信小程序的開發(fā)自然不是什么問題烹骨。
小程序和前端開發(fā)的關(guān)系
小程序開發(fā)工具文件視圖如下：
簡而言之有如下的對應(yīng)關(guān)系
pages中放置頁面utils放置其他的靜態(tài)資源等等app.js小程序初始化app.json小程序配置app.wxss小程序的全局樣式文件project.config.json項目的配置文件（開發(fā)者工具中可視化編輯）
在頁面下翻伺，有如下的對應(yīng)關(guān)系
| 小程序 | 前端 | 說明 |
|---|---|---|
| WXML | HTML | 基本沒啥區(qū)別材泄，微信中有自己的組件 |
| WXSS | CSS | 寫法完全是一樣的 |
| JS | JS | 了解一下NodeJS，動態(tài)地去渲染前端 |
| JSON | JSON | 小程序每個Page都有一個同名json文件用于配置信息 |
其實就這么簡單吨岭，初學(xué)者或者入門前端不久的同學(xué)拉宗，可以看看官方文檔的“入門教程”，其實小程序上線還有一些限制的辣辫，功能限制于賬號主體屬性旦事，或者有的小程序不符合價值觀的當然也是不能上線。
踩過的坑
說來這個部分才是干貨急灭，不得不抱怨一句姐浮，一開始拿到的時候還是挺煩的，由于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 => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
this.globalData.userKeyCode = res.code;
//登陸請求 開發(fā)者服務(wù)器
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']) {
// 已經(jīng)授權(quán)窗悯，可以直接調(diào)用 getUserInfo 獲取頭像昵稱区匣，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 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 是網(wǎng)絡(luò)請求蒋院，可能會在 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.網(wǎng)絡(luò)請求
這個坑亏钩，是在開發(fā)過程中向后端請求數(shù)據(jù)莲绰，發(fā)現(xiàn)提示沒有登陸，原來每次請求都得帶上header中的cookie姑丑，小程序的網(wǎng)絡(luò)請求不會自己帶上钉蒲，所有也就導(dǎo)致了服務(wù)端并沒有接受到正確的session，如上代碼彻坛，在app.js中保存cookie為一個header的全局變量顷啼，每次請求的時候帶上這個變量就行了。
全局變量的使用：
//在頁面中的js文件中聲明
const app = const app = getApp()
//然后在需要的地方寫
this.setData({
header: app.globalData.headers
})
3.this.setData不是一個fucntion
出現(xiàn)這個的原因是因為：在函數(shù)中this指向的是當前函數(shù)的上一級昌屉，當我們網(wǎng)絡(luò)請求success封包函數(shù)中這樣去給data賦值钙蒙，就會出現(xiàn)這個錯誤。
解決方法：
//在任意函數(shù)下聲明
var that = this;
//然后
that.setData({
code: res.code
})
總結(jié)
勤加練習(xí)间驮，小程序就會非常熟練了躬厌，建議翻閱一下小程序的文檔，然后想一個點子竞帽，然后去實現(xiàn)它扛施，不會的地方就去看文檔，文檔就是拿來看的屹篓，不是讓你背下來疙渣，當然背下來編碼速度更快一些，假以時日堆巧，相信大家都能非常熟練地編寫小程序妄荔，共勉！
