共计 5398 个字符，预计需要花费 14 分钟才能阅读完成。
1. 反对 npm
http://cdevelopers.weixin.qq….
- 初始化:npm init
- 装置依赖项：npm install
- 装置实现后须要从新构建一次：小程序 IDE –> 构建 npm
2. promise 化
https://github.com/youngjunin…
app.js 内调用一次
import {promisifyAll} from 'wx-promise-pro'
// promisify all wx‘s api
promisifyAll()
App({onLaunch() { },
globalData: {}})3. 反对 async await
https://developers.weixin.qq….
小程序编辑器内选中加强编译。
4. 网络申请
https://github.com/wendux/fly
微信小程序我的项目倡议间接下载源码到的小程序工程：
https://wendux.github.io/dist…
应用 Fly.jshttp 申请库, 编写公共申请
const Fly = require('../lib/flyio')
const fly = new Fly()
fly.config.baseURL = 'http://127.0.0.1:7001/api'
fly.config.timeout = 6000
// 申请拦截器
fly.interceptors.request.use(request => {wx.showLoading({ title: '数据加载中...'})
const token = wx.getStorageSync('token')
if (token) {request.headers['token'] = `${token}`
}
return request
})
// 响应拦截器
fly.interceptors.response.use(
// success
(response) => {wx.hideLoading()
return response.data || {}},
// error
(error) => {wx.hideLoading()
const isErrMsg = error.response && error.response.data
wx.showToast({
title: isErrMsg ? error.response.data.msg || '服务器异样' : error.message,
icon: 'none',
duration: 3000
})
}
)
module.exports = {fly}5. 引入 Vant Weapp
https://vant-contrib.gitee.io…
Vant webapp 反对 rpx
https://github.com/yingye/pos…
npm install gulp --save-dev
npm install gulp-postcss --save-dev
npm install postcss-px2units --save-dev
新建 gulpfile.js
// gulpfile.js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits = require('postcss-px2units');
gulp.task('vant-css', function () {return gulp.src(['miniprogram_npm/@vant/weapp/**/*.wxss','!miniprogram_npm/@vant/weapp/common/index.wxss'])
.pipe(postcss([pxtounits({
multiple: 2,
targetUnits: 'rpx'
})]))
.pipe(gulp.dest('miniprogram_npm/@vant/weapp/'));
});
疏忽 @vant/weapp/common/index.wxss，示意不解决 vant 的 1px 边框 CSS 代码。
package.json 中增加执行命令
"scripts": {"px2rpx": "gulp vant-css"}
npm run px2rpx
如果后续没有用到的组件库，能够在 miniprogram_npm 目录删除多余的组件。
6. 全局款式
app.wxss
page {
/* 设置全局字体 */
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
sans-serif;
font-size:32rpx;
}
view,
text,
input,
image,
button,
scroll-view,
cover-view {
box-sizing: border-box;
margin: 0;
padding: 0;
}7. 自定义 tabbar
https://developers.weixin.qq….
- 在 app.json 中的 tabBar 项定义菜单和指定 custom 字段为 true
"tabBar": {
"custom": true,
"color": "#F4F5F5",
"selectedColor": "#000000",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "/static/images/tabBar/home.png",
"selectedIconPath": "/static/images/tabBar/home_selected.png"
},
{
"pagePath": "pages/sao/sao",
"text": "扫码",
"iconPath": "/static/images/tabBar/sao_selected.png",
"selectedIconPath": "/static/images/tabBar/sao_selected.png"
},
{
"pagePath": "pages/my/my",
"iconPath": "/static/images/tabBar/my.png",
"selectedIconPath": "/static/images/tabBar/my_selected.png"
}
]
}- 增加 tabBar 代码文件, 在代码根目录下增加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
index.js 定义 tabBar 列表和抉择切换
Component({
data: {
selected: null,
tabBarList: [
{
pagePath: '/pages/index/index',
iconPath: '/static/images/tabBar/home.png',
selectedIconPath: '/static/images/tabBar/home_selected.png'
},
{
pagePath: '/pages/sao/sao',
text: '扫码',
iconPath: '/static/images/tabBar/sao_selected.png',
selectedIconPath: '/static/images/tabBar/sao_selected.png',
isSpecial: true
},
{
pagePath: '/pages/my/my',
iconPath: '/static/images/tabBar/my.png',
selectedIconPath: '/static/images/tabBar/my_selected.png'
}
]
},
methods: {switchTab(e) {
const data = e.currentTarget.dataset
const index = data.index
// 扫码
if (index === 1) {
wx.scanCode({success(res) {console.log(res)
},
fail(err) {console.log(err)
}
})
} else {
const url = data.path
wx.switchTab({url})
this.setData({selected: data.index})
}
}
}
})
index.json
{"component": true}
index.wxml
<view class="tab-bar-wrap">
<block wx:for="{{tabBarList}}" wx:key="pagePath">
<!-- 扫码非凡布局 -->
<view wx:if="{{item.isSpecial}}" class="tab-bar-nav" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
<!-- 圆角 -->
<view class="special-warp-border" />
<view class="special-wrap">
<image class="tab-bar-icon" src="{{item.iconPath}}" />
<text>{{item.text}}</text>
</view>
</view>
<view wx:else class="tab-bar-nav" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
<image class="tab-bar-icon" src="{{selected === index ? item.selectedIconPath : item.iconPath}}" />
<text>{{item.text}}</text>
</view>
</block>
</view>
index.wxss
.tab-bar-wrap {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 120rpx;
box-shadow: 0 2rpx 12rpx 0 rgb(0, 0, 0, 0.3);
}
.tab-bar-nav {
position: relative;
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24rpx;
background-color: #fff;
}
.tab-bar-icon {
width: 70rpx;
height: 70rpx;
}
/* 扫码布局 */
.special-warp-border {
position: absolute;
border-radius: 50%;
border: 2rpx solid #dcdfe6;
top: -80rpx;
background-color: #fff;
box-sizing: border-box;
width: 160rpx;
height: 160rpx;
}
.special-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: -50rpx;
}最初在 index.js 和 my.js 定义 getTabBar() 选中性能，并在 onShow 里调用
onShow: function () {this.setTabBarSelected()
},
// 设置自定义 tabBar 下标
setTabBarSelected() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 0})
}
}
8. 自定义导航栏
设置 app.json navigationStyle
"window":{"navigationStyle": "custom"}https://developers.weixin.qq….
https://github.com/lingxiaoyi…
把代码间接复制下来，不便进行二次批改。
在 app.json 进行全局引入
"usingComponents": {"nav-bar": "/components/nav-bar",}而后在页面里就能够应用了
<nav-bar title="我是题目" color="#606266" background="#ffffff">
</nav-bar>
9. 地图上显示弹出层
在 cover-view 中应用 css 动画，显著有不晦涩景象。
正文完
