uni app 开发微信小程序及上线体验

uni app 开发微信小程序及上线体验

1. 项目创建及微信小程序AppId的申请
   本次开发的是电商类的微信小程序，这里用到的是HBuilderX这个编辑器。之前用的Visual Studio Code 然后选择新建项目选择第二个uni-app。选择模板(建议选择默认模板）当然选择其他模板也可以，然后导入ui插件，可以导入多个插件，我这里导入了vant 和 uni 然后在微信社区登录小程序。安装注册流程注册申请小程序。然后系统给到AppId,然后再项目的manifest.json文件中找到微信小程序配置，然后填入相应的AppId，然后在HBuilder里面运行到微信小程序，如果电脑没用下载微信开发者工具，会提示下载或者直接去官网下载(tiannandibei diediezuimei)

2. 配置http及封装Ajax
   uni app配置相对比较简单。首先可以在项目里创建common文件夹。然后写一个http.js文件
   然后在main.js文件中导入import “./common/http.js” 以下为http.js的配置内容

import Vue from "vue"

// import {
// 	Encrypt,
// 	Decrypt
// } from "./aes/index.js"

Vue.prototype.$http = function(param, backpage, backtype) {
	let _self = this,
		url = param.url,
		method = param.method,
		header = {},
		data = param.data || {},
		token = "",
		cookie="",
		action = param.action || "",
		hideLoading = param.hideLoading || false;

	//拼接完整请求地址
	var requestUrl = "http://121.196.148.213:3000" + url;
	//固定参数:仅仅在小程序绑定页面通过code获取token的接口默认传递了参数token = login
	// if(!data.token){//其他业务接口传递过来的参数中无token
	//     token = uni.getStorageSync(this.sessionKey);//参数中无token时在本地缓存中获取
	//     console.log("当前token:" + token);
	//     if(!token){//本地无token需重新登录(退出时清缓存token)
	//         _self.login(backpage, backtype);
	//         return;
	//     }else{
	//         data.token = token;
	//     }
	// }
	// var timestamp = Date.parse(new Date());//时间戳
	// data["timestamp"] = timestamp;
	// // #ifdef MP-WEIXIN
	// data["device"] = "wxapp";
	// data["ver"] = "1.1.30";
	// // #endif
	// // #ifdef APP-PLUS || H5
	// data["device"] = "iosapp";
	// data["ver"] = "1.0.0";
	// // #endif

	

	//请求方式:GET或POST(POST需配置header: {'content-type' : "application/x-www-form-urlencoded"},)
	token = uni.getStorageSync('token');
 

	cookie= uni.getStorageSync('cookie')
	// cookie= "PHPSESSID=n3teundnfkhkoltcmkcrumfnh3"

	
	if (method) {
		method = method.toUpperCase(); //小写改为大写
		if (method == "POST") {
			header = {
				'TOKEN': token,
				'SESSIONS': cookie,
				'content-type': "application/x-www-form-urlencoded"
			};
		} else {
			header = {
				'TOKEN': token,
				'Set-Cookie': cookie,
				'content-type': "application/json"
			};
		}
	} else {
		method = "GET";
		header = {
			'TOKEN': token,
			'content-type': "application/json"
		};
	}
	//用户交互:加载圈
	if (!hideLoading) {
		uni.showLoading();
	}

	//    console.log("网络请求start", data);
	// console.log("加密前：", JSON.stringify(data))
	// let aes1 = Encrypt(JSON.stringify(data))
	// console.log("加密后：", aes1)
	// console.log("解密后：", Decrypt("A9DDDBBE7BC67298BB9922EF00BFA0C5D693AE804918376C6249CC3A083A22CA319A1BA5CFD1BEB93090325D52F92919"))
	//网络请求
	// try {
	// 	// 获取放入缓存的字段token
	// 	const token = uni.getStorageSync('token');
	// 	if (token) { // 如果存在token 配置请求头
	// 		header = {
	// 			'Authorization': 'Bearer ' + token,
	// 			'Content-Type': 'application/json'
	// 		};
	// 	} else { // 不存在token 跳转至登录
	// 		uni.navigateTo({
	// 			url: '/pages/login/login'
	// 		});
	// 		return;
	// 	}
	// } catch (err) {
	// 	console.log(err)
	// }
	// console.log(header,"header")
	return new Promise((resolve, reject) => {
		uni.request({
			
			url:  requestUrl,
			// url: `/apis/?s=${requestUrl}`,
			method: method,
			header: header,
			
			
			data: {
				action,
				// data: Encrypt(JSON.stringify(data)),
				data: JSON.stringify(data),
			},
			success: res => {
				uni.hideLoading()
				uni.setStorageSync("cookie", res.header["Set-Cookie"]);
				resolve(res.data)
			},
			fail: (e) => {
				uni.hideLoading()
				reject(e)
				// console.log("网络请求fail:" + JSON.stringify(e));
				// uni.showModal({
				//     content:"" + e.errMsg
				// });
				// typeof param.fail == "function" && param.fail(e.data);
			}
		});
	})
}

3. 配置页面及tabBar
   这个主要是在pages.json这个文件里面配置，因为微信小程序没有router跳转页面。所以我们再pages.json配置完页面需要用uni.navigateTo这个方法跳到对应页面。如果是跳到tabBa页面需要用到uni.switchTab这个方法，可以直接点击page这个文件夹选择创建页面会直接导入到pages.json文件中。很方便，以下是配置tabBar的代码

"tabBar": {
		"color": "#515151",
		"selectedColor": "#f50",
		"backgroundColor": "#fff",
		"borderStyle": "black",
		"list": [{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "static/images/home.png",
				"selectedIconPath": "static/images/home-on.png"
			},

			{
				"pagePath": "pages/list/list",
				"text": "分类",
				"iconPath": "static/images/find.png",
				"selectedIconPath": "static/images/find-on.png"
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "static/images/cart.png",
				"selectedIconPath": "static/images/cart-on.png"
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"iconPath": "static/images/mine.png",
				"selectedIconPath": "static/images/mine-on.png"
			}
		]
	}

4. 项目开发和组件通信
   因为uni app是基于vue的所有更多是用到vue的组件通讯，然后整个结合onLoad 和created 可以更灵活的做好页面的加载，这个就不多讲了

5. 项目打包及上传审核发布注意
   完成项目开发好了之后，我们再HBuilder选择发行到微信小程序。然后再微信开发者工具选择上传就可以再小程序管理页面看到我们的项目了。然后我们选择设置为体验版。这样项目的体验用户就可以看到了。这边体验用户就是正常使用。但是提交审核还有一定的注意要求。首先电商项目不能一开始就要求客户必须授权，要让用户先体验整个页面，然后再选择是否登录授权。然后有不授权的回退页面。同时要完善小程序的资料填写，审核时间还是很快的大概半个小时就有结果了