文件目录
app.json
小程序配置： developers.weixin.qq.com/miniprogram…
.postcssrc.js 和 postcss.config.js
- 样式转化问题：rem转rpx
pages
其中每一个页面对应一个文件夹
main.js
main.json
index.vue
1、不要出现header,section,footer等标签，全部改成div
2、{{}}动态数据绑定
由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。 凡是涉及较为复杂的表达式，可以用computed来代替
3、for 循环
5、生命周期
mpvue同时支持了vue的生命周期和小程序的生命周期
index.css
标签问题
1、注意b标签在小程序转化后是display:block 属性，所以要么将b标签改成span标签，要么在b标签里面添加display：inline-block属性
背景图片问题
2、背景图片只能用线上的图片，引用本地图片会报错。
图片自适应问题
3、图片宽高自适应问题，在小程序中直接设置图片宽度为100%是不能让他本身的高度是自适应的，需要在图片本身身上添加mode="widthFix"属性
iphoneX 兼容问题
4、iphoneX底部按钮兼容问题
获取系统信息：developers.weixin.qq.com/miniprogram…
onShow () {
let that = this
wx.getSystemInfo({
success: res => {
let modelmes = res.model
if (modelmes.search('iPhone X') !== -1) {
that.isIphoneX = true
that.$store.commit('setIsIphoneX', that.isIphoneX)
}
}
})
}
navBar 样式
5、底部弹出框遮盖navBar 问题
navBar 层级最高，所以只能自定义navbar,或者将弹出框出现在中间部分。
自定义弹出框问题
6 自定义弹出框——后面背景不能动问题
components
和vue使用组件方法原理一样
-
style 文件夹
-
vue文件
utils
-
store.js
-
fly.js
- 请求数据
import Vue from 'vue'
var Fly = require('flyio/dist/npm/wx') // wx.js为flyio的微信小程序入口文件
var fly = new Fly() // 创建fly实例
// 添加拦截器
// 添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
(response, promise) => {
// 只将请求结果的data字段返回
return response.data
},
(err, promise) => {
if (err) {
wx.hideLoading()
wx.showToast({
title: '网络不流畅，请稍后再试',
icon: 'none',
duration: 2500
})
}
}
)
// 配置请求基地址
Vue.prototype.$http = fly
fly.config.baseURL = 'http://user.cheeze.api.dev.hzmantu.com/api'
export default fly
- request.js
- 请求数据
import store from '@/utils/store.js'
import Vue from 'vue'
Vue.prototype.$store = store
const host = ''
function request (url, method, data, header) {
wx.showLoading({
title: '加载中' // 数据请求前loading
})
return new Promise((resolve, reject) => {
wx.request({
url: host + url, // 仅为示例，并非真实的接口地址
method: method,
data: data,
header: header,
success: function (res) {
wx.hideLoading()
resolve(res.data)
},
fail: function (error) {
wx.hideLoading()
reject(error)
},
complete: function () {
wx.hideLoading()
}
})
})
}
function get (obj) {
return request(obj.url, 'GET', obj.data, obj.header)
}
function post (obj) {
return request(obj.url, 'POST', obj.data, obj.header)
}
function del (obj) {
return request(obj.url, 'DELETE', obj.data, obj.header)
}
export default {
request,
get,
post,
del,
host
}
小程序对应规则
页面跳转
路由跳转传参
wx.navigateTo({
url:'../test/main?id='+id
})
- 第一种：
onShow (options) {
let id = options.id
}
- 第二种：在所有页面组件内可以通过
this.mp.query获取
要注意就是：写在mounted函数里，写到created报错
- 第三种：在所有的组件内可以通过
this.mp.appOptions获取。
正常情况下三种应该都是可以的，某一种没用的时候就尝试另外两种
developers.weixin.qq.com/miniprogram…
微信自带组件
弹出框
picker 组件踩坑
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"
- 睁大眼睛仔细对比小程序文档和我截图代码的区别
- mpvue 中同样有事件，但是调取参数 e 的值的方式和 Web 不同，需要使用 e.mp.detail
轮播图
