1047
1047
3月前 · 3 人阅读

前言

本篇文章是基于微信开发者工具搭建的一套项目结构,做微信小程序开发有微信自己的开发工具,是基于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 请求,

//引入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中开发,编译后的文件放在微信开发者工具中展示,和调试。

收藏 0
js mock const data template ht
评论 ( 0 )