前言
本篇文章是基于微信开发者工具搭建的一套项目结构，做微信小程序开发有微信自己的开发工具，是基于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中 写我们的可复用组件
<view>
<template name="msgItem">
<view>
<text class='msgItemStyle'> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
</view>
用法：
1、在需要加载的组件中引入模版即可
<!--index.wxml-->
<view class="container">
<button bindtap="viewTap"> {{title}} </button>
<text>{{path}}</text>
<import src ="../../template/template.wxml"/>
<view>
<template is="msgItem" data="{{...item}}"/>
</view>
<button bindtap="viewTapWeui"> 跳转weui </button>
</view>
4、utils 工具函数
这里定义一些我们常用的工具函数等.
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
此时一个小程序开发的 基本结构 就完成了，但微信开发工具有很多不好的地方如：不支持查看引用，不支持代码重构，不支持小程序api的智能提示,写起代码来不够畅快，影响开发效率。目前 也有一些 小程序的开发框架 如 wepy 和mpvue等基于vue的开发框架。在IDE中开发，编译后的文件放在微信开发者工具中展示，和调试。
