如何使用uniapp快速搭建跨平台多端项目教程

小程序开发中，存在一种基于Vue的编写方式，这种写法与小程序规范相吻合。其中，有许多值得深入研究的细节。

基于Vue的语法配合小程序需求

// 创建.gitlab-ci.yml文件，便于上传执行
stages:
    - deployDonate
    - deploy
deployDonate:
    stage: deployDonate
    script:
        - ssh 服务器ip 'cd 存放文件的根目录 && git pull && cd 存放文件根目录下的需要打包文件 && npm i && npm run build'
    only:
        - master  
deploy:
    stage: deploy
    script:
        - ssh 服务器ip 'cd 存放文件的根目录 && git pull && cd 存放文件根目录下的需要打包文件 && npm i && npm run build'
    only:
        - production  

现在采用的开发方式，在语法上是以vue的写法为基础。比如，在排版上会遵照小程序的规定，不仅包含vue的标准格式，还加入了小程序独有的元素，例如触底事件等。这样做可以使得小程序的生命周期操作更加顺畅。对于熟悉vue的开发者来说，这样可以更快地掌握。但是，同时也要考虑到小程序的特殊性，测试时可能会遇到不兼容的问题。在具体操作时，还需针对不同平台进行调整，比如在使用小程序开发平台和其他平台时，可能需要采取不同的处理手段。

// .env.development
VUE_APP_URL= ''
// .env.production.example
VUE_APP_URL= ''

这种做法的优势在于将Vue的特性与小程序的特色相结合。然而，在借鉴小程序的独特之处时，可能会遇到一些兼容上的难题。因此，开发者需提前了解并做好相应的应对措施。

// config.com
module.exports = {
  // 请求域名 格式： https://您的域名
  baseURL: process.env.NODE_ENV==\"development\"? 'http://www.baidu.com' : process.env.VUE_APP_URL, //本地 
  timeout: '5000',
};

项目文件的操作

import { baseURL, timeout} from '../config.js';
export default function request(api, method, data,loadup) {
	let DefaultOpts  = {
		url: baseURL + api,
		method: method || 'GET',
		timeout: timeout,
		data: data || '',
		header: {
			'content-type': 'application/json',
			//\"Content-Type\": \"multipart/form-data\", // 上传图片需要切换的歌声
			'Token': uni.getStorageSync('weiju_token'),
		}
	}
	return new Promise((resolve, reject) => {
		if(loadup) { // 当前为上传文件接口
			let upObj = {
				url: baseURL + api,
				filePath: data,
				name: 'file',
			}
			uni.uploadFile(upObj).then((res) => {
				resolve(JSON.parse(res[1].data))
			}).catch((response) => {reject(response)})
		} else { 
			uni.request(DefaultOpts).then((res) => {
				if(res[1].data.code == '401' || res[1].data.code == '402' ) {
					uni.showToast({
						icon:'none',
						title: '身份已过期,请重新登录',
						duration: 2000 
					});
					uni.navigateTo({
					    url: '/pages/tabar/login/login'
					});
					//尚未登录的逻辑处理
					return false
				}
				resolve(res[1].data)
			}).catch((response) => {reject(response)})
		}
		
	})
}
['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
	request[method] = (api, data,state) => request(api, method, data,state)
});

好的项目可以轻松复制到vue的src文件夹。若想在微信开发平台使用，需将src独立导入平台。操作时需留意文件路径等细节，例如不同环境下的域名指向需特别设置。在vue中，需配置两个根文件。同时，文件传输和部署时，要关注服务器操作。在服务器上，对上传到Git的代码执行特定命令，确保项目顺利运行和打包。

import request from './request.js'
export function addAddress(data) {
   return request.post('xxxx',data)
}

有时因操作不当或对流程不熟悉，项目执行可能会受阻。因此，必须对流程的每一步进行多次核对，以保证各个环节都不被忽视。

	components: {}
	data() {return {}}
	methods: {}
	onLoad() {} // 页面首次加载
	
	onPageScroll(res) {} // 滚动监听
	onShow() {} // 显示页面
	onReachBottom: function () {} // 页面上拉触底事件的处理函数
	onShareAppMessage(res) {} // 页面分享转发

平台运行限制与应对

小程序开发平台上的项目，未压缩前无法在手机上预览，必须发布到平台并压缩后才能查看。此外，每次构建小程序时，都需要在pages.json里设定文件路径。若采用vue技术，每设置一个路径，就得在两个文件里重复操作。这种重复且繁琐的工作，可以通过使用封装好的路由拦截方法来简化，这样不仅能减少操作步骤，还能提升开发速度。

\"subPackages\": [
	{
		\"root\": \"pages/tabar_page/homeIndex\",
		\"pages\": [
			{
				\"path\": \"business_index\",
				\"style\": {
					// #ifdef MP
						\"navigationBarTitleText\": \"商务合作\",
					// #endif 
					// \"navigationStyle\": \"custom\",
					\"app-plus\": {
						\"titleNView\": {
							\"type\": \"transparent\"
						}
					}
				}
			},
		]
	},
	{
	      \"root\": \"pages/apply/\",
	      \"name\": \"apply\",
	      \"pages\": [
	        \"partner/partner\",
	        \"business/business\",
	        \"pay/pay\"
	      ]
	 },
]

不采用这种封装方法，每次设置配置文件路径都会变得既耗时又容易出错。这种情况在大型项目或处理多个文件时尤为突出。

数据编辑与页面更新

uniCrazyRouter.beforeEach((to, from ,next)=>{
	next(); // 能符合条件的则继续执行
})

编辑地址列表并保存后，列表页数据可自动更新。小程序提供方法，能查询历史跳转页面及调用相应方法。此功能颇为实用，但开发时需保证数据更新流程准确无误。有时数据修改后，界面未能即时刷新，需采取特定措施解决。

在具体项目需求里，合理的数据处理和迅速的页面刷新对用户感受极为关键。一旦数据刷新与界面刷新不匹配，就可能引发显示混乱等负面效果。

/* #ifndef APP-NVUE */
	white-space: nowrap;
/* #endif */

微信支付与调用处理

// #ifdef %PLATFORM% 
   这些代码只在该平台编译
// #endif

小程序仅支持通过微信支付进行操作，并且必须获取特定信息。获取这些信息时，可以采取静默模式。但要注意，以防静默调用微信登录失败，我们需在关键位置额外调用一次。在执行uni.login时，应完整地抛出函数。确保这些步骤的顺序和逻辑正确，否则支付功能可能会出现异常。

小程序中支付功能极为重要，若此功能出现故障，小程序的商业价值或许会遭受损害。

APP-PLUS
APP-PLUS-NVUE
H5 
MP-WEIXIN	
MP-ALIPAY
MP-BAIDU
MP-TOUTIAO
MP-QQ
MP

兼容与操作注意事项

项目若支持小程序，需注意避免使用js直接操作DOM事件，诸如“.”或Vue的$refs来获取元素。若确实需要获取元素，可以尝试使用uni提供的节点信息功能。若自行开发类似功能而非使用现成方法，在多端打包后可能遇到兼容性问题。此外，在处理数据时，比如处理红色框自动生成的命名数量不确定的情况，应在data中先定义一个空数组来收集依赖，否则可能会出现数据更新上的问题。另外，在更新数组数据并同步视图时，除了使用$set方法处理添加数据的情况外，动态删除数据后置为空也可能导致视图未及时更新。

这警示开发者，在实现跨平台兼容时必须严格遵守操作规范。即便测试阶段未显现出兼容问题，一旦众多用户开始使用，问题可能集中显现，届时将变得相当难以处理。

uni.navigateBack({
	delta: 1,
	success: function(e) {
		var page = getCurrentPages();
		if (page == undefined || page == null) return;
		var pages = page[page.length - 2];
		pages.$vm._addressList(); // 调转到列表页重新请求列表数据
	}
});

在制作小程序的过程中，你是否也遭遇过一些棘手的问题？欢迎你在评论区分享你的经历，同时记得点赞并转发这篇文章。