uniapp⽤html5做的案例，使⽤uni-app写h5页⾯总结
1.设置全局变量
这⾥我只⽤了2种，⼀种在main.js⾥⾯设置了全局变量，⼀种使⽤vuexhtml
(1).第⼀种，main.js⾥⾯设置
Vue.prototype.Url = 'xx.xx/lua_bills/';
页⾯使⽤的时候能够这样⽤：this.Url+'openid',vue
url :this.Url+'openid',
method :'GET',
data :{
code:code
},
success:function(data){
}
})
(2).第⼆种，使⽤vuex，这⾥我使⽤了模块化
根⽬录下新建⼀个store⽂件，store下包含modules⽂件夹，index.js⽂件，getters.js⽂件，结构以下：
vuex
modules⾥⾯包含header.js和inquiry.js，每个⽂件中都包含state，mutations，actions，获取数据我都写在了getters.js⽂件中⽹络建好store后在main.js⾥⾯引⽤app
import Vue from 'vue'
import store from './store/index.js'
import App from './App'
import pageHead from './component/header.vue'
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
header.js的代码内容：模块化
const state = {
steam退款怎么退款mname : "",
logo : "",
}黄山市旅游景点
const mutations = {
setMname(state,mname) {
},
setLogo(state,logo) {
state.logo = logo
}
}
财务岗位竞聘演讲稿范文const actions = {
header_fun({ commit },data){
commit('setMname', data.header_name) commit('setLogo', data.header_logo)
}
}
export default {
namespaced: true,
state,
actions,
mutations
}
getters.js代码内容：函数
const getters = {
mname: state => ame, logo: state => state.header.logo,
}
export default getters
index.js代码内容：ui
import Vue from 'vue'
import Vuex from 'vuex'
import header from './modules/header.js'
import inquiry from './modules/inquiry.js'
import getters from './getters.js'
Vue.use(Vuex)
const store = new Vuex.Store({
modules:{
header,
inquiry,
},
getters
})
export default store
页⾯使⽤全局变量this
例如：在js⾥⾯引⼊store，取值能够使⽤ame'，也能够使⽤辅助函数mapGetters取值，修改值使⽤store.dispatch('inquiry/userinfo',data.data.data)，也能够使⽤辅助函数mapActions，这⾥我没⽤lua
main.js定义全局变量和使⽤vuex的区别：
main.js⾥⾯定义的全局变量是固定的，不可动态修改的，vuex⾥⾯定义的全局变量是能够动态修改的
2.定义全局组件
好⽐我这⾥有4个页⾯，每⼀个页⾯的头部都是同样的，这样就能够定义⼀个全局组件，在每⼀个页⾯引⼊他头部的组件：
这是⼀个头部
export default {
name: "page-head",
data() {
return {
}
},
methods: {
合作社贷款}
}高铁安检
页⾯使⽤的时候先在main.js⾥⾯注册⼀下，页⾯再引⽤
import Vue from 'vue'
import store from './store/index.js'
import App from './App'
import pageHead from './component/header.vue'
Vueponent('page-head',pageHead)
页⾯使⽤：
3.Uncaught TypeError Cannot read property 'dispatch' of undefined
当时报这个错是修改store⾥⾯的变量，⽤这种写法this.$store.dispatch，以后改为把store引⼊进来，使⽤store.dispatch()以后就⾏了
this.$store.dispatch('header/header_fun',this.header);//报错
store.dispatch('header/header_fun',this.header);//正常运⾏
4.this.setData is not a function
当时遇到的状况是，在⼀个quest的success⾥⾯接着⼜发起了另⼀个⽹络请求quest，以后在⽅法最前⾯把this改为that，发起请求的时候都使⽤that，报错解决
var that = this;
5.vue 动态⽣成html，绑定点击时间⽆效
@click="detail(i)"改为以下所⽰
created()⽅法⾥⾯再添加下⾯⼀⾏，执⾏点击操做的时候method的detail()⽅法就⽣效了
window.detail = this.detail;
created() {
window.detail = this.detail;
刘诗诗和杨幂谁漂亮}
methods: {
detail(id){
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论