微信小程式模板介紹

Hwg發表於2019-05-20
微信小程式

github地址：github.com/hwgq2005/xc…

一、目錄結構

├── components
|   ├── select-address
├── images
├── pages
|   ├── page1
|   └── page2
├── utils
|   ├── common.js
|   ├── host.js
|   ├── reg.js
|   ├── request.js
|   └── sign.js
├── wxml
|   ├── aaa.wxml
|   └── bbb.wxml
├── wxss
|   ├── common.wxss
|   ├── header.wxss
|   └── sidebar.wxss
└── wxParse
複製程式碼

1.components

主要存放元件模組，可自行新增。 元件需要在頁面裡的 xxx.json 檔案下配置元件路徑，如下：

{
	"navigationBarTitleText": "標題",
    "usingComponents":{
    	"select-address":"../../components/select-address/select-address"
    }
}
複製程式碼

2.utils

封裝了公共的模板，可以看到以下這些檔案：

  • request.js - 請求封裝
  • sign.js - 請求籤名引數
  • host.js - 域名環境控制
  • reg.js - 正則匹配驗證
  • common.js - 公共方法

3.wxParse

主要是用來解析HTML。

import WxParse from '../../wxParse/wxParse'

WxParse.wxParse('名稱定義', 'html', data.data.rules, this, 5);
複製程式碼

WxParse.wxParse(bindName , type, data, target,imagePadding)

  • bindName繫結的資料名(必填)
  • type可以為html或者md(必填)
  • data為傳入的具體資料(必填)
  • target為Page物件,一般為this(必填)
  • imagePadding為當圖片自適應是左右的單一padding(預設為0,可選)

引入模板

<import src="../../wxParse/wxParse.wxml"/>

<!--bindName-->
<template is="wxParse" data="{{wxParseData:名稱定義.nodes}}"/>
複製程式碼

二、請求呼叫

1.通用方式

import $ from '../../utils/request'

$.ajax({
    url: _.host.baseApi + '/api/xxx',
    method: 'post',
    data: {}
}).then(function(data){
   do somethig ...
})
複製程式碼

2.GET請求

import $ from '../../utils/request'

$.get(_.host.baseApi + '/api/xxx',data: {}).then(function(data){
	do somethig ...
})
複製程式碼

3.POST請求

import $ from '../../utils/request'

$.post(_.host.baseApi + '/api/xxx',data: {}).then(function(data){
   do somethig ...
})
複製程式碼

4.引數說明

欄位 欄位說明
method get或post，預設值為get
data isSign等於true或false，預設值為false，可根據情況刪減。

三、域名環境控制

考慮到一個專案不同模組不同域名的情況下：

// 是否開發環境
let isDev = false;

// 開發環境域名
let dev = {
  // 商城API
  baseApi : 'xxx1.com',
  // 抽獎api
  drawApi :  'xxx2.com'
}

// 線上環境域名
let pro = {
  // 商城API
  baseApi : 'xxx3.com',
  // 抽獎api
  drawApi :  'xxx4.com'
}

export default isDev ? dev : pro
複製程式碼

四、結尾

以上只提供目錄模板及公共方法，其他需自行開發。 微信小程式開發文件：developers.weixin.qq.com/miniprogram…

相關文章