小程序
1. 支持npm
http://cdevelopers.weixin.qq....
- 初始化:npm init
- 安装依赖项：npm install
- 安装完成后需要重新构建一次：小程序IDE --> 构建 npm
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.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.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 = https://www.it610.com/article/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
{{item.text}}
{{item.text}}
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",
}然后在页面里就可以使用了
9. 地图上显示弹出层
在 cover-view 中使用css动画，明显有不流畅现象。
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）