使用uni-app写h5页面总结

1.设置全局变量

这里我只用了2种，一种在main.js里面设置了全局变量，一种使用vuex

(1).第一种，main.js里面设置

Vue.prototype.Url = 'https://xx.xx.cn/lua_bills/';

页面使用的时候可以这样用：this.Url+'openid',

uni.request({
   url    :this.Url+'openid',
   method :'GET',
   data   :{
	code:code
   },
   success:function(data){

   }
						
					
})

(2).第二种，使用vuex,这里我使用了模块化

根目录下新建一个store文件，store下包含modules文件夹，index.js文件，getters.js文件,结构如下：

modules里面包含header.js和inquiry.js,每一个文件中都包含state，mutations，actions，获取数据我都写在了getters.js文件中

建好store后在main.js里面引用

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 = {
		mname   : "",
		logo    : "",
		
	}
       const mutations = {
	   
		setMname(state,mname) {
			state.mname = 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 => state.header.mname,
  logo: state => state.header.logo,
    
 }
export default getters

index.js代码内容：

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

页面使用全局变量

例如：在js里面引入store，取值可以使用store.getters.mname',也可以使用辅助函数mapGetters取值，修改值使用store.dispatch('inquiry/userinfo',data.data.data)，也可以使用辅助函数mapActions，这里我没用

 

main.js定义全局变量和使用vuex的区别：

main.js里面定义的全局变量是固定的，不可动态修改的，vuex里面定义的全局变量是可以动态修改的

2.定义全局组件

比如我这里有4个页面，每个页面的头部都是一样的，这样就可以定义一个全局组件，在每个页面引入他

头部的组件：

页面使用的时候先在main.js里面注册一下，页面再引用

import Vue from 'vue'
import store from './store/index.js'
import App from './App'
import pageHead  from './component/header.vue'
Vue.component('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

当时遇到的情况是，在一个uni.request的success里面接着又发起了另外一个网络请求uni.request,之后在方法最前面把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){
				
	}
}