小程序的项目架构

Nam form Pixiv

目前项目用到的小程序项目架构，比较特殊的是store和behaviors，有个清晰的目录架构可以加快开发的效率，便于维护

小程序的项目架构

behavior

存放小程序需要用到的混合文件,类似vue的mixin

// page-a.js
// var myBehavior = require('./my-behavior.js')
// Page({
//   behaviors: [myBehavior],
//   onLoad: function() {
//     this.data.sharedText === 'This is a piece of data shared between pages.'
//   }
// })
const app = getApp()
module.exports = Behavior({
  data: {
    userInfo: null,
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  methods: {
    // 1.通过button来授权获取 用户信息
    getUserInfo: function(e) {
      console.log('--getUserInfo--')
      app.globalData.userInfo = e.detail.userInfo
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    },

    // 2.通过静默授权的方式来获取 用户信息（为了兼容旧版本）
    silentGetUserInfo: function() {
      return new Promise((resolve, reject) => {
        console.log('--silentGetUserInfo--', app.globalData.userInfo)
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
          // 已登录
          resolve(app.globalData.userInfo)
        } else if (this.data.canIUse) {
          // 获取用户信息 ( 如果授权过以后直接获取用户信息 )
          wx.getSetting({
            success: res => {
              console.log('scope.userInfo=', res.authSetting['scope.userInfo'])
              if (res.authSetting['scope.userInfo']) {
                // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                wx.getUserInfo({
                  success: res => {
                    // 可以将 res 发送给后台解码出 unionId
                    app.globalData.userInfo = res.userInfo
                    console.log('res.userInfo', res.userInfo)
                    // 已登录
                    resolve(res.userInfo)
                  },
                  fail: () => {
                    // 没登录
                    reject(null)
                  }
                })
              } else {
                // 没登录
                reject(null)
              }
            },
            fail: () => {
              // 没登录
              reject(null)
            }
          })
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
              // 已登录
              resolve(res.userInfo)
            },
            fail: () => {
              // 没登录
              reject(null)
            }
          })
        }
      })
    },
    // 3.退出登录
    loginOut() {
      // 清除page的登录的数据
      this.setData({
        userInfo: null,
        hasUserInfo: false,
        isLogin: false
      })
      // 清除app的登录数据
      app.globalData.userInfo = null
    }
  }
})

config

用于定义环境与接口地址，方便切换与维护

// config.dev.js
// 开发环境
module.exports = {
  isDebug: true,
  baseUrl: 'http://192.168.1.120',
  storageUrl: 'http://192.168.1.120'
}

// index.js
// 1.开发环境
// const conf = require('./config.dev.js')
// 1.测试环境
const conf = require('./config.pro.js')
// 1.正式环境
// const conf = require('./config.real.js')

module.exports = {
  isDebug: conf.isDebug,
  baseUrl: conf.baseUrl,
  storageUrl: conf.storageUrl
}

service

用于存放接口地址

var http = require('../../utils/http.js')

const api_report = {
  foo: '/aaa, 
  boo: '/bbb'
}

const reportList = (payload) => {
  return http.post(api_report.foo, payload) // 返回的是 promise
}
const reportSubmit = (payload) => {
  return http.post(api_report.boo, payload) // 返回的是 promise
}
// 对外暴露
module.exports = {
  reportList,
  reportSubmit
}

store

类似vue的vuex作用,用于存储全局变量

// store.js
import { observable, action } from 'mobx-miniprogram'

export const store = observable({

  // 数据字段( 相当于data的fields )
  numA: 1,
  numB: 2,

  // 计算属性( 相当于data的fields )
  get sum() {
    return this.numA + this.numB
  },

  // actions
  update: action(function() {
    const sum = this.sum
    this.numA = this.numB
    this.numB = sum
  })

})

util

网络方面：需要注意的是小程序的登录功能因为需要存储token和用户信息，而用户信息是存在小程序的Storage中，在http中会处理到用户的信息

utils.js

// rpx 转换为 px
const rpxTopx  =(rpx)=>{
  let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
  let px = (deviceWidth/750)*Number(rpx);
  return px;
}
// px 转换为 rpx ，传参类型是数字（Number）
const pxTorpx = (px) => {
    let deviceWidth = wx.getSystemInfoSync().windowWidth;   //获取设备屏幕宽度
    let rpx = (750 / Number(px)) * deviceWidth;
    return rpx;
}
const getAuthToken = () => {
  return wx.getStorageSync('session_key')
}

// 清除登录的数据（退出登录）
const loginOut = () => {
  setAuthToken(null)
}
module.exports = {
  rpxTopx,
  pxTorpx,
  getAuthToken,
  loginOut 
}

http.js

// const baseUrl = '' // 基本路径
const config = require('../config/index')
const utils = require('../utils/util.js')
// 请求方法
function request(url, method, data, header, hasLoading = true) {
  data = data || {}
  header = header || {}

  // // 判断 是否有登录 token
  const auth_token = utils.getAuthToken() // 同步
  // 对接时候写死token
  if (auth_token) {
    header['auth_token'] = auth_token
  } else {
    // 测试 auth_token
    header['auth_token'] = 'abc'
  }

  // 加载动画
  if (hasLoading) {
    wx.showLoading({
      title: '加载中'
    })
  }

  // 创建 promise 对象
  const promise = new Promise((resolve, reject) => {
    wx.request({
      url: config.baseUrl + url, // 地址
      header: header,
      data: data,
      method: method,
      success: function(res) {
        console.log( res)
        if (hasLoading) {
          wx.hideLoading() // 隐藏加载动画
        }
        // 判断是否成功（res的数据需要看接口返回的数据做判断）
        if (typeof res.data === 'object') {
          // console.log(res)
          if (res.data.code === -1 || res.data.code === '1001') {
            // 判断是否有登录 请求未登录
            // {code: -1
            //  data: "401"
            //  msg: "未登录"}
            if (res.data.data === '401') {
              // 清除登录数据，重新登录
              utils.loginOut()
              setTimeout(() => {
                // 跳转到登录页面
                wx.redirectTo({
                  url: '/pages/mine/mine' //  跳转登录页
                })
              }, 500)
              wx.showToast({
                title: '请重新登录！',
                icon: 'none',
                duration: 2000
              })
              reject(res)
            // 请求失败
            } else {
              wx.showToast({
                title: res.data.msg || '请求失败',
                icon: 'none',
                duration: 2000
              })
              reject(res)
            }
          } else if (res.data.code === 200 || res.data.code === 0) {
            resolve(res)
          } else {
            reject(res)
          }
        } else {
          reject(res)
        }
      },

      // 接口调用失败的回调函数
      fail: function(res) {
        console.log('x=', config.baseUrl + url)
        if (hasLoading) {
          wx.hideLoading()
        }
        wx.showToast({
          title: '网络错误！',
          icon: 'none',
          duration: 2000
        })
        reject(res)
      }

    })
  })
  return promise
}

// 对外暴露
module.exports = {
  get: function(url, data, header) {
    return request(url, 'GET', data, header)
  },
  post: function(url, data, header) {
    return request(url, 'POST', data, header)
  }
}

template

小程序提供模板功能,可自定义几个"暂无数据"的模板进行复用

// 使用模板
<import src="../../templates/no-data/no-data.wxml"/>
<!-- 没有数据 -->
<view
   class="report-list-page no-data"
   wx:if="{{dataList.length === 0}}">
     <template is="noData"></template>
</view>

// 定义模板
<!--templates/no-login/no-data.wxml-->
<template name="noData">
  <view style="text-align: center;">
    <image 
      src="../../images/mine/no-find-bg.png"
      style="width:506rpx;height:239rpx;margin-top:107rpx"
    >
    </image>
    <view style="color:#8E919C;font-size:28rpx">暂无数据</view>
  </view>
</template>

其它

小程序有个坑点需要注意，就是css中background-image引用图片时会无法显示，需要把图片转为base64，这个转换可以在onload生命周期上进行

  data:{
    bannerBg:'../../images/banner.png'
  },
  onLoad: function(options) {
    const bannerBg = wx.getFileSystemManager().readFileSync(this.data.bannerBg, 'base64')
    that.setData({
      'bannerBg': 'data:image/jpg;base64,' + bannerBg,
    })
  },