小程序原生
一.页面传值的三种方式
1.利用url传值url?params=data¶ms1=data1
取值onLoad: function(option){option.params}
2.本地储存
3.全局的app对象
二.跳转到tabbar页的时候
<navigator url="/page/index/index" open-type="switchTab" >切换 Tab</navigator>
//js
wx.switchTab({
url: '../b/b'
})
三设置数组的其中的一个属性
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
（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
（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 功能，你可以全局安装一个桥接工具
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
创建mpvue项目
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
使用
// main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)
router/index.js
module.exports=[
{
path:'/pages/index/index',
name:'首页',
config:{
navigationBarTitleText:'首页',
}
}
]
flyio
fly docs
安装 npm i flyio -D
src/utils/fly.js
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
import req from '../utils/fly'
const getlist=()=>{
//flyio返回的应该是一个promise对象
return req.get('https://api.ithome.com/xml/slide/slide.xml')
}
export {getlist}
如果需要使用vuex 数据共享
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文件中触发
this.$store.dispatch('getArticle').then(res=>{
console.log(res)
})
