一、模块化开发wxs（定义公共的方法，模板里调用）
wxs小程序脚本语言（里面写公共模块）
像网络封装，在utils-js文件中暴露的方法是在页面js文件中引入并使用
而公共方法封装，在utils-wxs文件中暴露的方法可以在页面wxml文件中直接使用
1. utils-wxs文件
function filterUrl(url){
if(url.indexOf('http') === -1){
return 'http://10.7.163.165:8089/'+url
}
return url
}
module.exports = {
filterUrl:filterUrl
}
2. 页面wxml文件，通过wxs标签（src指定路径，module指定模块名）引入
<wxs src="../../utils/demo.wxs" module="demo"></wxs>
<view>
<block wx:for="{{list}}" wx:key="*this">
<van-card num="2" price="{{item.price}}" desc="{{item.desc}}" title="{{item.product}}"
thumb="{{ demo.filterUrl(item.picture) }}" />
</block>
</view>
二、小程序框架搭建步骤
1.创建小程序
1>. 点击➕新建小程序项目
2>. 填写项目名称、项目存放目录、AppID、选择开发模式等信息，点击确定就可以进行项目开发了。AppID官网注册登录后，点击开发-开发管理，即可看到开发者ID中的AppID
2.配置
app.json配置页面效果（对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等）
{
"pages": [
"pages/index/index",
"pages/my/index",
"pages/order/index",
"pages/pay/index",
"pages/shop/index",
"pages/goods/index",
"pages/detail/index"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "点餐",
"navigationBarTextStyle": "black"
},
"tabBar": {
"backgroundColor": "#fff",
"selectedColor": "#e64330",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./images/home-off.png",
"selectedIconPath": "./images/home-on.png"
},
{
"pagePath": "pages/shop/index",
"text": "积分商城",
"iconPath": "./images/ic_catefory_normal.png",
"selectedIconPath": "./images/ic_catefory_pressed.png"
},
{
"pagePath": "pages/pay/index",
"text": "支付",
"iconPath": "./images/ic_catefory_normal.png",
"selectedIconPath": "./images/ic_catefory_pressed.png"
},
{
"pagePath": "pages/order/index",
"text": "订单",
"iconPath": "./images/cart-off.png",
"selectedIconPath": "./images/cart-on.png"
},
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath": "./images/my-off.png",
"selectedIconPath": "./images/my-on.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
3. 集成vant-weapp第三方组件库
1>.安装：
*npm init -y *（初始化生成package.json文件）
npm i @vant/weapp -S --production或者yarn add @vant/weapp --production（安装生成node_modules文件）
2>.修改app.json文件
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
3>.修改project.config.json文件
在project.config.json文件中的"packNpmRelationList":[]中添加对象(指定package.json文件的路径和小程序安装vant组件库的路径)
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],
4>.点击左上角工具 -> 构建 npm，执行完以后项目根目录会增加：“miniprogram_npm”目录，就是vant- weapp的组件。构建完成后，即可引入组件。
5>.在app.json（全局）或index.json中注册组件，wxml文件中使用组件
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-dialog": "@vant/weapp/dialog/index",
"van-uploader": "@vant/weapp/uploader/index",
"van-nav-bar": "@vant/weapp/nav-bar/index"
}
4. 网络封装
1>.utils工具文件夹中创建一个request.js文件，用于封装网络请求
request.js文件
/**
* 封装网络请求
* {
* url:''
* method:'get',
* data:,
* }
*/
const baseUrl = 'http://10.7.163.165:8089'
export const axiosInstance = options => {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + options.url,
method: options.method,
data: options.data,
success: res => {
resolve(res.data)
},
fail: error => {
reject(error)
}
})
})
}
2>.utils同级目录创建一个api文件夹，api文件夹下创建js文件，用于封装项目中所有用到的请求接口
js文件
import { axiosInstance } from '../utils/request.js'
/**
* 商品列表
*/
export const RequestGoodsList = ()=>{
return axiosInstance({
url:'/api/shop',
method:'get',
data:{},
})
}
3>.页面中使用，页面js文件中引入接口，调用
5. 格式化文件.prettierrc.json
{
"tabWidth": 4,
"useTabs": false,
"semi": false,
"singleQuote": true,
"TrailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid"
}
