微信小程序项目搭建

前言

本篇文章是基于微信开发者工具搭建的一套项目结构，做微信小程序开发有微信自己的开发工具，是基于nw.js写的。做的比较简洁，基本的代码编辑、智能提示、调试等功能都有。刚接触小程序开发，推荐这种开发方式，上手比较快，开发难度低。

一、项目框架结构和文件目录结构

小程序注册及创建创建quick start项目之前的流程可以看官方步骤，这里只讲项目结构搭建和目录组织方式。
完整的结构如下所示：

│ ├── http //http请求配置文件
│ │ └── api // 封装http 请求
│ ├── img // 图片资源文件
│ ├── mock //mock 环境
│ │ └── api.js //封装 mock请求
│ │ └── mock.js //mock.js
│ │ └── mock.nav.js //配置mock数据
│ ├── pages //项目页面目录
│ ├── static //第三方资源目录
│ │ └── weui.wxss //路由配置文件
│ ├── template //存放可复用模版
│ │ └── template.js
│ │ └── template.wxml
│ │ └── template.wxss
│ ├── utils //工具函数文件
│ │ └── utils.js
│ ├── app.js // 应用程序入口文件
│ ├── app.json // 小程序的全局配置
│ ├── app.wxss // 小程序的全局样式

二、结构详解

1、封装http
小程序 用wx.request(OBJECT)发起网络请求，在api文件下 可以封装一个调用函数，如下所示：

//===接口域名=== **url中不能有端口**
const root = 'https://xxx.xxx.com/';

// ==get请求方法模版
const GET = (url,callback) => {
  wx.request({
    url: root+url,
    header: { 'content-type': 'application/json' },
    success(res) {
      callback(null, res.data)
    },
    fail(e) {
      console.error(e)
      callback(e)
    },

  })
}
// ==post请求方法模版
 const POST = (url,data, callback) => {
  wx.request({
    method: 'POST',
    url:root+url,
    data: data,
    header: { 'content-type': 'application/x-www-form-urlencoded' },
    success(res) {
      callback(null, res.data)
    },
    fail(e) {
      console.error(e)
      callback(e)
    },

  })
}

module.exports = {
  POST: POST,
  GET:GET
}

用法:
1、在需要请求后台接口的页面 的js中引入 api文件
      import http from '../../http/api.js'
2. 在页面渲染完成后调用
  // 页面渲染完成
  onReady () {
    http.POST('article/list', { "cpage": 1, "putPosition": 2, "type": 2 }, (err, data)=>{
      // console.log(data)
    })
  },

2、封装mock请求
利用 mock.js 模拟数据请求，在后台接口没有提供的情况下，前端做假数据模拟http 请求，

• api.js

//引入mock.js 模拟数据
const Mock = require('./mock.js')
//引入mock 接口数据
import { MockApi } from './mock.nav.js'


//===接口域名=== **url中不能有端口**
const root = 'https://xxx.xxx.com/';

// ==post请求方法模版
const POST = (url, data, callback) => {
  let res;
  for (let i = 0; i < MockApi.length;i++){
    if (url == MockApi[i].path){
       res = Mock.mock(MockApi[i].data)
    } 
  }
    callback(null, res)
}
module.exports = {
  POST: POST,
}

-mock.nav.js mock 数据

export const MockApi = [

  {
    path:"article/getArticleLists",
    data:{
      "code":"200",
      "result":[
        {
          "userId":"11012",
          "userName":"哈士奇",
          "userUri":"",
          "executeTime":1489035996000,
          "State":"1",
          "workflowDemo":"TANGYAOYAO/DEMO",
          "workflow":"TANGYAOYAO"
        },
        {
          "userId":"11012",
          "userName":"哈士奇",
          "userUri":"",
          "executeTime":1489043996000,
          "State":"2",
          "workflowDemo":"TANGYAOYAO/DEMO",
          "workflow":"TANGYAOYAO"
        },
        {
          "userId":"11012",
          "userName":"哈士奇",
          "userUri":"",
          "executeTime":1589063996000,
          "State":"3",
          "workflowDemo":"TANGYAOYAO/DEMO",
          "workflow":"TANGYAOYAO"
        },
      ]
    }
  },
  {
    path: "article/getArticleDetail",
    data: {
      "code": "200",
      "result": 
        {
          "userId": "11012",
          "userName": "哈士奇",
          "userUri": "",
          "executeTime": 1489035996000,
          "State": "1",
          "workflowDemo": "TANGYAOYAO/DEMO",
          "workflow": "TANGYAOYAO"
        }
    }
  }

]

用法:
1、在需要请求后台接口的页面 的js中引入 api文件
      import http from '../../mock/api.js'
2. 在页面渲染完成后调用
  // 页面渲染完成
  onReady () {
    http.POST('article/getArticleLists', { "cpage": 1, "putPosition": 2, "type": 2 }, (err, data)=>{
      console.log(data)
    })   
  },

3、template 编写 公共组件
在 template中 写我们的可复用组件

用法：
1、在需要加载的组件中引入模版即可


    {{title}} 
   {{path}}