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

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

简述

刚接触小程序的开发,个人觉得要写好小程序,得熟悉前端开发,因为小程序的编码基于HTMLCSSJS。只不过在微信中,为了打造微信的生态圈,重新定义了小程序编码。其实质还是和前端开发类似,如果你有了解过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
})

总结

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

发表评论 / Comment

用心评论~

金玉良言 / Appraise
    LV 1
2018-09-30 22:18
有没有亿乐社区2.0源码分享一下,铁粉现在需要有的发一下文章 [F17]
    LV 1
2018-09-30 22:17
有没有亿乐社区2.0源码分享一下,铁粉现在需要有的发一下文章

Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/blog.dyboy.cn/content/templates/dyblog/footer.php:56) in /www/wwwroot/blog.dyboy.cn/include/lib/view.php on line 23