小记微信小程序开发中踩过的坑

为了参加微信小程序开发大赛，了解了微信小程序的开发，在实际的开发过程中遇到了一些问题，以此记录，避免再犯！

简述

• 小程序的开发官方文档链接：小程序开发API

• 我的代码仓库：Github

刚接触小程序的开发，个人觉得要写好小程序，得熟悉前端开发，因为小程序的编码基于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 = getApp()
//然后在需要的地方写
this.setData({
    header: app.globalData.headers
})

3.this.setData不是一个fucntion

出现这个的原因是因为：在函数中this指向的是当前函数的上一级，当我们网络请求success封包函数中这样去给data赋值，就会出现这个错误。

//在任意函数下声明
var that = this;
//然后
that.setData({
    code: res.code
})

总结

勤加练习，小程序就会非常熟练了，建议翻阅一下小程序的文档，然后想一个点子，然后去实现它，不会的地方就去看文档，文档就是拿来看的，不是让你背下来，当然背下来编码速度更快一些，假以时日，相信大家都能非常熟练地编写小程序，共勉！