小程序项目搭建

小程序项目基础搭建，方便快速开发原生小程序，使用脚手架的同学随意

在根目录下分别创建

components 用来存放项目需要的组件资源或者自定义的组件

config 新建一个 js 文件用来存放通用域名配置文件

rousources 资源文件目录，存放图片、 iconfont 等资源

service 服务相关目录，用来存放与 api 相关的文件

通用域名配置文件

切换开发环境或者测试环境下，只要更换对应的 url 即可

/**
** 核心
** 2019-03-11
** 通用域名配置，
**/

// 包含接口或资源域名配置，版本配置，调式开关配置等
var config = {
  wsUrl: "wss://xxx.xxx.cn/", // websocket 请求域名
  serverUrl: "https://yyy.xxx.cn/", // 生产api 接口请求域名
  version: "v1.0.0", // 版本配置
  _set: {
    isDebug: true
  }
};

export default config;

封装请求文件

可以像普通项目封装 axios 一样来对小程序中的请求进行封装，在调用时只调用写好的 api 文件即可

import { serverUrl } from '../config/b.core' // 域名配置项
const headerConfig = {
  "Content-Type": "application/json"
}
export function request(url, options) {
  return new Promise((resolve, reject) => {
    var params = {};
    var token = wx.getStorageSync('token');
    params.userToken = token;
    params = Object.assign(params, options);
    wx.request({
      url: serverUrl + url,
      data: params,
      header: headerConfig,
      method: 'POST',
      success: function (res) {
        if (res.data.err_code == '200007') { // 登录过期
          reLogin().then(() => {
            // console.log(url, options)
            request(url, options).then(res => {
              resolve(res)
            })
          })
        } else if (res.data.err_code == '300001') { // 内部错误
          wx.showToast({
            title: '网络错误',
            icon: 'none',
            duration: 1500
          })
          reject(res)
        } else {
          resolve(res)
        }
      },
      fail: function (res) {
        console.log(res)
        wx.showToast({
          title: '网络错误',
          icon: 'none',
          duration: 1500
        })
        reject(res)
      },
      complete: function (res) { }
    })
  })
}
// 重新登录
function reLogin() {
  return new Promise((resolve, reject) => {
    var that = this
    // 登录
    wx.login({
      success: resp => {
        // 发送 resp.code 到后台换取 openId, sessionKey, unionId
        // console.log(resp);
        var params = {
          wxCode: resp.code
        }
        wx.request({
          url: serverUrl + 'account/v1/login',
          data: params,
          header: { "Content-Type": "application/json" },
          method: 'POST',
          responseType: 'text',
          success: function (data) {
            // console.log(data)
            if (data.data.err_code == '0') {
              wx.setStorageSync('token', data.data.data.userToken);
              resolve()
            } else {
              wx.showToast({
                title: '网络错误',
                icon: 'none',
                duration: 1500
              })
              reject()
            }
          },
          fail: function (res) {
            wx.showToast({
              title: '网络错误',
              icon: 'none',
              duration: 1500
            })
            reject()
          },
          complete: function (res) { },
        })
      }
    })
  })
}

微信小程序中使用 less

VSCode 编辑器

安装插件 Easy Less ，这个插件的作用是自动将你写的 less 编译成 css ，但是我们需要的是 wxss ，在项目目录下新增一个文件夹 .vscode ，新建文件 settings.json ，添加配置：

{
    "less.compile": {
        "compress": true, // 是否删除多余空白字符
        "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
        "out": false, // 是否输出css文件，false为不输出
        "outExt": ".wxss", // 输出文件的后缀,默认为.css
    }
}

需要注意的问题

1. 小程序的 onLaunch 和页面级的 onLoad 异步执行，这两个的执行顺序是不一定的，在 onLaunch 中请求还未返回的时候， onLoad 可能就执行了，需要加判断