第一个原生小程序踩坑记录（一）

项目比较急，接到需求的时候有犹豫过用mpvue还是原生开发，先用mpvue搭建了一个demo写写公共组件之类的，结果遇到了不少坑，后来咨询了几位大神，结论：如果项目不复杂用mpvue，如果复杂用原生。默默看了一眼原型的标题“xx商城”，立马调转枪头，重新原生开发
总用时：两周，之前没有过小程序的开发经验，所以用到啥去查啥，还好语法跟vue很像，有过vue开发经验的还是上手比较快的，记录一下过程中碰到的问题，也算是一个小总结吧

1、申请账号，下载工具

打开微信开发文档，https://developers.weixin.qq.com/miniprogram/dev/
跟着步骤一步步走下去即可，需要注意的是：接口域名加入到白名单，不然会报错，一个月最多可以修改5次，域名不能带端口，需要是https。图片可以非https

2、下载自己的开发工具

用习惯了vscode，还是想用这个来开发，步骤：打开vscode，拖入项目，没了，是不是很简单，这时候只需要把微信的开发者工具当做一个预览的工具即可，新建page的时候，我是习惯于在小程序的编辑器直接右键新建page，会自动生成对应的js, json, wxml, wxss。
想用less来写样式的话，必须要生成wxss，这个也不难，首先，easyless安装这个插件，安装成功后，打开“文件-首选项-设置”，将下面的代码贴在用户设置区域保存，然后在每一个页面的文件夹里右键新建一个xxx.less的文件，写进去一些内容，保存，就会自动生成一个wxss文件
"less.compile": {
  "compress": true, // 是否删除多余空白字符
  "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
  "out": true, // 是否输出css文件，false为不输出
  "outExt": ".wxss", // 输出文件的后缀,默认为.css
}
现在的page结构就是这样的![图片描述][1]

3、引入字体文件

网上看到很多资料说下载的字体文件需要手动转一下base64，后来发现不需要转，直接新建一个style文件夹，放公共的样式，在此文件夹里新建一个iconfont.wxss文件，然后将字体文件下载到本地，把iconfont.css文件复制黏贴到iconfont.wxss中，然后将这部分复制![图片描述][2]，替换wxss中的@font-face部分即可

4、封装request

utils文件里新建一个request.js
function post(url, params = {}, isFull = false, isJson = false, isLoading = false, header) {

    **检查网络，如果网络出错直接return出去**
    
  let hasNetWork = checkNetWork() 
  if (!hasNetWork) {
    util.showToast('网络出错，稍后再试');
    return false
  }
  let contentType = isJson ? 'application/json' : 'application/x-www-form-urlencoded'
  let _authorization = {}
  
  **如果接口需要token，去缓存里取**
  
  if(wx.getStorageSync('token')){
    _authorization = { 'Authorization': 'Bearer ' + wx.getStorageSync('token') }
  }
  let _header = Object.assign({ 'content-type': contentType }, _authorization, header)
  
  **如果isFull为true，则不拼接baseUrl，用于一些非常规接口**
  
  let _url = isFull ? url : baseUrl + url)
  return new Promise(function (resolve, reject) {
  
    **实际应用上关掉了所有的loading，这样界面安静了很多**
    
    isLoading && wx.showLoading({ title: '玩命加载中...' })
    wx.request({
      url: _url,
      header: _header,
      data: params,
      method: 'POST',
      success: (res) => {
        let data = res.data
        if (data.code === 200) {
          resolve(data.data);
          isLoading && wx.hideLoading()
        } else if (...) {
        
          **此处可以加上其他的返回结果判断**
          
        } else if (data.code === 404) {
          wx.navigateTo({
            url: '/pages/notFount/404'
          })
        } else {
          reject(res.data);
        }
      },
      fail: (error) => {
        reject(error)
      },
      complete: (data) => {
        if (data.data.code !== 200) {
          if (data.data.message) {
          
          **加一个延迟，避免隐藏loading影响弹出消息一闪而过**
          
            setTimeout(() => {
              util.showToast(data.data.message);
            }, 200)
          }
        }
      }
    })
  });
}

判断网络情况
const checkNetWork = function () {
  return new Promise(resolve => {
    wx.getNetworkType({
      success: res => {
        let networkType = res.networkType
        if (networkType === 'none' || networkType === 'unknown') {
          resolve(false)
        } else {
          resolve(true)
        }
      },
      fail: () => {
        resolve(false)
      }
    })
  })
}
最后在module.exports中抛出去即可
准备工作基本做好了，还有一些公共样式，变量之类的跟之前项目基本一样，不做赘述，现在可以愉快地写代码了