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 apipromisifyAll()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.jsvar 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动画，显著有不晦涩景象。