uniapp-微信小程序开发坑点

兼容

1.网络请求兼容

1.1 h5需要进行代理

请求封装

import {
	getToken,
	removeToken
} from './store.js'

export const WX_BASE_URL = 'http://192.168.1.29:8002'
export const POST = 'post'
export const GET = 'get'
export const DELETE = 'delete'
export const PUT = 'put'
/**
 * 请求接口封装
 * loading 加载loading，默认拥有
 */
export function request({
	url,
	method,
	data,
	loading = true
}) {
	return new Promise((resolve, reject) => {
		loading ? uni.showLoading({
			mask: true
		}) : ''
		uni.request({
			// 请求兼容处理
			// #ifdef H5
			url,
			// #endif

			// #ifdef MP-WEIXIN
			url: WX_BASE_URL + url,
			// #endif

			header: {
				'authorization': getToken('authorization') || ''
			},
			method,
			data,
			success(res) {
				loading ? uni.hideLoading() : ''
				switch (res.statusCode) {
					case 200:
						resolve(res.data)
						break;
					case 400:
						uni.showToast({
							icon: 'none',
							title: '参数错误'
						})
						reject(res.data)
						break;
					case 401:
						uni.showToast({
							icon: 'none',
							title: '请重新登录'
						})
						removeToken()
						reject(res.data)
						break;
					case 403:
						uni.showToast({
							icon: 'none',
							title: '拒绝访问'
						})
						reject(res.data)
						break;
					case 500:
						uni.showToast({
							icon: 'none',
							title: '系统异常'
						})
						reject(res.data)
						break;
					default:
						uni.showToast({
							icon: 'none',
							title: '请求错误' + res.data
						})
						reject(res.data)
						break;
				}

			},
			fail(error) {
				console.log(error)
				loading ? uni.hideLoading() : ''
				uni.showToast({
					icon: 'none',
					title: '请求接口失败' + error
				})
				reject(error)
			}
		})
	})
}


/**
 * 正常链接http://xxxxxxxx,请求富文本
 */
export function http({
	url,
	method,
	data,
	loading = true
}) {
	return new Promise((resolve, reject) => {
		loading ? uni.showLoading({}) : ''
		uni.request({
			url,
			data,
			method,
			header: {
				'authorization': getToken('authorization') || ''
			},
			success(res) {
				if (res.statusCode === 200) {
					loading ? uni.hideLoading() : ''
					resolve(res.data)
				} else {
					loading ? uni.hideLoading() : ''
					uni.showToast({
						icon: 'none',
						title: '请求错误' + res.data
					})
					reject(res.data)
				}
			},
			fail(error) {
				loading ? uni.hideLoading() : ''
				uni.showToast({
					title: '请求接口失败' + error
				})
				reject(error)
			}
		})
	})
}

代理配置(源码视图)

	"h5": {
		"title": "xrnh-shop",
		"domain": "",
		"router": {
			"mode": "hash",
			"base": "./"
		},
		"devServer": {
			"https": false, //是否启用https协议
			"disableHostCheck": true, //设置跳过host检查
			"port": 8080, //运行浏览器端口
			"proxy": {
				"/": {
					"target": "http://192.168.1.29:8002", //目标接口域名
					"changeOrigin": true, //是否跨域
					"secure": true //设置支持https协议的代理
				}
			}
		}
	}

1.2 微信小程序无需代理

tips:url 必须是完整的https || https

2.顶部nav-header兼容

2.1 h5 兼容

2.2 微信小程序兼容

tips 不要计算顶部的 44px

3.富文本解析失败

3.1 h5兼容

rich-text即可

3.2 微信小程序兼容

插件市场寻找富文本插件
注意事项：

1. 控制台上传富文本图片时禁止上传base64格式，导致解析过慢，甚至解析异常。

4. ：style绑定问题

不要采用计算属性去进行样式绑定

4.1h5兼容

uniapp本身即可

4.2微信兼容

直接以形式

<div :style={color:'red'}>121</div>

5.pdf 预览问题

• h5 采用 web-view 进行预览
• 小程序采用downloadFile ， openDocument进行打开文档

等待继续补充…