官网:http://mpvue.com/mpvue/quicks…
一、新建一个mpvue项目
$ vue init mpvue/mpvue-quickstart my-project //新建项目
$ cd my-project //切换到项目
$ npm install //装置依靠
$ npm run dev //运转
二、预览
1、起首,打包
$ npm run build
2、翻开“微信开发者东西”,在‘项目目次’中挑选项目标dist文件,APPID能够暂时不写,‘项目名称’自定义。
3、点击‘编译’看结果,点击‘预览’在手机上用微信扫码看结果。
三、页面跳转
<navigator url="../agreement/main">马上报名</navigator>
在最外层app.json中到场途径且从新运转该项目,如下图:
四、分享
<button open-type='share'>分享</button>
假如须要自定义分享,则重写以下要领(注重,此要领不该放在methods中,应当与methods同级)
onShareAppMessage: function (res) {
// 分享顺序
var title = ''
var path = 'pages/index/main'
var imageUrl = ''
return {
title,
path,
imageUrl,
success: (res) => {
console.log('res', res)
},
fail: (res) => {
console.log('res', res)
}
}
}
五、图片预览
<img src="/static/images/second_11.jpg" style="width:60rpx;height:60rpx" @click='previewImg'>
previewImg () {
// 预览图片
wx.previewImage({
// current: '/static/images/second_3.jpg', // 当前显现图片的http链接,只要一张时,能够不写
urls: ['http://bak-img.oss-cn-shenzhen.aliyuncs.com/20181204111744.jpg'], // 须要预览的图片http链接列表
success (res) {
console.log(res)
},
fail () {
wx.showToast({
title: '预览失利!',
icon: 'none',
duration: 1000
})
}
})
}
六、要求接口
wx.request({
url: myUrl,
data: {
type: 'k'
},
success: function (res) {
console.log(res.data)
}
})
七、图片上传到阿里云(OSS)
请参考这位大佬的博客:https://blog.csdn.net/qq_2337…
点击油滑结果(到场addscale即可):
.addscale {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: addscale;
animation: addscale 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
}
@-webkit-keyframes addscale {
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
@keyframes addscale {
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
from,
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform: scale(1.05, 0.95);
transform: scale(1.05, 0.95);
}
75% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
}
八、一般挑选器
结果图:
<picker mode = selector @change="bindPickerChange($event)" :value="sexVal" :range="sexArray">
<div class="picker">
当前挑选:{{sexVal}}
</div>
</picker>
data () {
return {
sexArray: ['女', '男'],
sexVal: '挑选'
}
},
methods: {
bindPickerChange(e) {
let index = Number(e.mp.detail.value)
this.sexVal = this.sexArray[index]
}
}
九、单页面的设置
请参考此大佬:https://blog.csdn.net/qq_3543…
十、页面跳转
1、行内跳转
a、navigator、vue-router都能够
2、js跳转(标签为<a>)
*一般跳转 navigateTo
const url = '../result/main'
wx.navigateTo({url})
*底部导航跳转 switchTab
const url = '../result/main'
wx.switchTab({url})