概述

在现代信息系统应用平台开发中，移动端的开发是必不可少的部分！可以实现随时、随地的进行业务工作的开展！

在项目管理系统开发过程中，采用uniapp来实现相关移动端的业务。

uniapp好处是可以开发多端的应用，比如小程序、H5、Android、IOS等终端，实现最大化的开发成本减少！

相关页面

首页

开发环境与生产环境配置

在生产环境中通常使用域名或者固定的ip地址进行访问应用程序，比如http://xx.xx.com, 而在开发环境中通常使用http://localhost进行访问！

在HubildX在开发的时候，使用 process.env 的环境变量来定义全局的域名

var common = {}
common.staticUrl = "http://localhost:5000";
//判断是否是开发环境
if(process.env.NODE_ENV === "development"){
	common.staticUrl = "http://oa.qdxxxx.com";
}

在HBuildX进行打包的时候，就会自动启用 http://oa.qdxxx.com,进行访问

自定义uniapp业务模块使用

比如事项接口 定义为matterCreateBiz.js

//#ifdef H5
import wx from "jweixin-module"
//#endif
import http from '../common/http/index.js'

var matterCreateBiz = {
	
	//根据参数param,得到分页数据
	GetPageList : function(param){
		//
	}
};

export default matterCreateBiz;

在main.js进行全局注册当前模块，使用Vue.prototype.$matterCreateBiz = matterCreateBiz 进行注册。

模块使用,在Vue的页面中进行使用

使用 this.$matterBiz.GetPageListByCreateUser 来向后台获取信息

关于this

在javascript开发过程中，this 是默认是指向window 或者某个对象。

而在uniapp中，因为是单页开发，所有元素都是动态append上的，所以this默认是指向当前的uniapp全局的，这个一个要注意点，特别是刚开始进行单页开发的时候，容易忽略这一点！

在main.js注册的业务模块，都可以使用this.$xxxx进行直接使用

比如main.js的模块

import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$http = http
Vue.prototype.$c = common
Vue.prototype.$type = 'full' 
Vue.prototype.$canExcelPort = false 
Vue.prototype.$scan = false
Vue.prototype.$userBiz = userBiz;
Vue.prototype.$matterCateBiz = matterCateBiz;
Vue.prototype.$devProjectBiz = devProjectBiz;
Vue.prototype.$matterCreateBiz = matterCreateBiz;
Vue.prototype.$matterBiz = matterBiz;
Vue.prototype.$matterDealBiz = matterDealBiz;
Vue.use(uView);

Vue.prototype.$xxx 都是可以使用 this.$xxx进行访问每个模块方法！

其他注意点

在每个页面中，使用onLoad（e） 的 e来获取page传递过来的参数。

onShow进行整体页面的界初始化

method定义vue组件各个属性需要的方法

另外特别需要注意点一定要参照uviewui相关的文档来进行页面组件的使用，它与js或者jquery来开发的方法是不一样的。

共创、共享、共赢！