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

1. 配置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);
			}
		});
	})
}

"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 可以更灵活的做好页面的加载，这个就不多讲了