小程序框架mpvue初步

| mpvue

小程序原生

页面传值的三种方式

1.利用url
传值 url?params=data&params1=data1
取值 onLoad: function(option){option.params}

2.本地储存

3.全局的app对象

跳转到tabbar页的时候

1
2
3
4
5
<navigator url="/page/index/index" open-type="switchTab" >切换 Tab</navigator>
//js
wx.switchTab({
      url: '../b/b'
})

设置数组的其中的一个属性

1
2
3
4
5
var active = this.data.cartInfo[e.currentTarget.dataset.index].active
    var circle = 'cartInfo['+e.currentTarget.dataset.index+'].active'
    this.setData({
      [circle]:!active
    })

post data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

  1. 对于 GET 方法的数据，会将数据转换成query string

    1
    2
    （encodeURIComponent(k)=encodeURIComponent(v)
    &encodeURIComponent(k)=encodeURIComponent(v)...）

  2. 对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会对数据进行 JSON 序列化

  3. 对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string 

    1
    2
    （encodeURIComponent(k)=encodeURIComponent(v)
    &encodeURIComponent(k)=encodeURIComponent(v)...）

页面刷新

当返回上一页面需要刷新数据时，可以请求写在onshow函数中

mpvue

mpvue docs
由于vue-cli 已经升级到3.0 ，所以要更新一下,Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先卸载
npm uninstall vue-cli -g
安装
npm install -g @vue/cli
检查版本
vue --version
Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具

1
2
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

创建mpvue项目

1
2
3
 vue init mpvue/mpvue-quickstart my-project
cd my-project
npm install

搭配 VueX、mpVue-Router-Patch、mpVue-wxParse、Flyio 、mpvue-entry
新建页面时需要重新编译

mpvue-entry

集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面热更新,v1.5.0 版本开始支持 mpvue-loader@^1.1.0 版本，新版 src 目录下需存在 app.json 文件
安装
npm i mpvue-entry -D
配置
build/webpack.base.conf.js目录

mpVue-Router-Patch

vue-router路由是不能支持的，因为小程序无法动态的插入和控制节点，几乎无法实现。而且小程序对页面的切换性能做了很多优化，页面切换体验也好了很多，所以使用 vue-router 也不那么必要

如果是h5和小程序互相转换的话，可以使用Vue-Router-Patch，在 mpvue 中使用 vue-router 兼容的路由写法
安装
npm i mpvue-router-patch
使用

1
2
3
4
5
// main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)

router/index.js

1
2
3
4
5
6
7
8
9
module.exports=[
    {
        path:'/pages/index/index',
        name:'首页',
        config:{
            navigationBarTitleText:'首页',
        }
    }   
]

flyio

fly docs

安装 npm i flyio -D

src/utils/fly.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly

// fly.config.baseURL='xxx'  实例级配置

//设置超时
fly.config.timeout = 20000;
//请求拦截器
fly.interceptors.request.use((request)=>{
    //给所有请求添加自定义header
    request.headers["X-Tag"]='flyio'
    return request
})

//响应拦截器
fly.interceptors.response.use( 
    (response)=>{
        return response.data
    },
    (err,promise)=>{
         return promise.resolve()
    }
)
export default fly

使用,api接口单独文件
src/service/api.js

1
2
3
4
5
6
7
8
9
import req from '../utils/fly'

const getlist=()=>{
  //flyio返回的应该是一个promise对象
   return req.get('https://api.ithome.com/xml/slide/slide.xml')
  }

export {getlist}

如果需要使用vuex 数据共享

1
2
3
4
5
6
7
8
9
10
11
import {getlist} from '../../service/api'
 actions: {
      async getArticle({commit,state}){  //不需要共享可以不放vuex里，此处为了练习
          try{
            var list=await getlist()  //await一个promise对象
            return list
          }catch(err){
            console.log(err)
          }
      }
    }

在.vue文件中触发

1
2
3
this.$store.dispatch('getArticle').then(res=>{
     console.log(res)
   })