uniapp development some practical experience

foreword

Each end has management rules for each end, which cannot be smoothed out by uni-app at the technical level:

• For example, the browser on the H5 side has cross-domain restrictions;
• For example, WeChat applets will force https links, and all server domain names to be connected to the Internet must be assigned to WeChat's whitelist;
• For example, on the App side, iOS is very strict on privacy control and virtual payment control;
• For example, there are various compatibility differences between the App side, Android, and domestic roms, especially because Google services are blocked, resulting in chaotic development pits such as push and positioning;

1 Device status bar height statusBarHeight

statusBarHeight: uni.getSystemInfoSync().statusBarHeight // Higher accuracy than css variables

2 The jump page carries object parameters, must be encodeURIComponentcoded -> compatible with applets! (Special symbols such as ?, & carried by the parameter)

uni.navigateTo({
	url: 'chooseShopGood?shopInfo=' + encodeURIComponent(JSON.stringify(this.shopInfo))
})

if not encodeURIComponent，微信小程序就报错了！

Receiver decodes decodeURIComponent

onLoad(options) {
	if (options.shopInfo) {
		this.shopInfo = JSON.parse(decodeURIComponent(options.shopInfo))
		this.shopId = this.shopInfo.shopId
	}
},

If special symbols such as ? and & are carried in the parameter, you must remember to encode and decode

3 canvas drawing

DrawImage has no picture problem: use local pictures to solve cross-domain: H5 and WeChat applets

Network images require uni.getImageInfo(OBJECT). To obtain network image information under the applet, you need to configure the download domain name whitelist first to take effect. Returning res.path is the image address of our drawImage (getImageInfo uses a static address is the wrong path (subpackage), so it is best to use a network address)

image view effect

<image :src="inviteCodePosterImagePath" :style="{width:100+'px',height:100+'px'}" />

ctx.setFillStyle('transparent'); Cannot be set to transparent, otherwise the picture will not be visible!

The code below is just for reference, and you still need to download the plug-in in the end, because there is a rounded rectangle frame in the plug-in!

		handlePoster(type) {
			let that = this
			if(this.inviteCodePosterImagePath) {
				uni.hideLoading()
				if (type === 1) {
					this.saveImage(this.inviteCodePosterImagePath)
				} else if (type === 2) {
					// #ifdef H5
					uni.showToast({
						icon: 'none',
						title: '请下载APP使用此功能'
					});
					// #endif
					// #ifdef APP-PLUS
					uni.share({
						provider: 'weixin',
						scene: 'WXSceneSession',
						type: 2,
						imageUrl: that.inviteCodePosterImagePath,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
					// #endif
					// #ifdef MP-WEIXIN 
					console.log('分享')
					wx.showShareImageMenu({
					   path: that.inviteCodePosterImagePath,
					   complete: function(res) {
							console.log(res);
						}
					})
					// #endif
				}
			} else {
				//#ifdef MP-WEIXIN
				uni.showLoading({
					title: '图片生成中'
				});
				uni.getImageInfo({
					src: 'https://jhoss.zgtgex.com/static/assets/images/user/22-200.png',
					success: function (image) {
						if(image.path) {
							that.canvasPoster(type,image.path)
						} else {
							uni.showToast({
								title: '失败',
								icon: 'none'
							});
						}
					}
				});
				//#endif
				
				//#ifdef H5 || APP-PLUS
				that.canvasPoster(type,'/static/assets/images/user/22-200.png')
				//#endif
			}
		},

		canvasPoster(type,posterBgImgPath) {
			console.log('canvasPoster')
			let that = this
			let ctx = uni.createCanvasContext('inviteCode', this);
			ctx.setFillStyle("#ffffff");
			ctx.fillRect(0, 0, 200, 340); // fillRect(x,y,宽度，高度)
			ctx.drawImage(posterBgImgPath, 0, 0, 200, 340);
			ctx.restore();
			
			ctx.setFontSize(16); // 字号
			ctx.setFillStyle('#fff'); // 颜色
			ctx.fillText('面对面扫码邀请', 44, 30); // （文字，x，y）

			ctx.setFontSize(14); // 字号
			ctx.setFillStyle('#333'); // 颜色
			ctx.fillText('扫描二维码进行注册', 36, 280); // （文字，x，y）
			ctx.setFontSize(16); // 字号
			ctx.setFillStyle('#333'); // 颜色
			ctx.fillText('我的邀请码:' + this.userInfo.inviteCode, 30, 310); // （文字，x，y）

			ctx.rect(15, 70, 170, 170);
			ctx.setFillStyle('#ffffff');
			ctx.fill();

			ctx.drawImage(this.codeBase64, 25, 80, 150, 150);
			ctx.draw(true, ret => {
				setTimeout(()=>{
					uni.canvasToTempFilePath({
						width: 200,
						height: 340,
						canvasId: 'inviteCode',
						quality: 1,
						complete: res => {
							that.inviteCodePosterImagePath = res.tempFilePath
							that.handlePoster(type) 
						}
					},this);
				},500)
				
			},500);
		},

4 Wechat applet picture sharing (share canvas drawing)

// #ifdef MP-WEIXIN 
console.log('分享')
wx.showShareImageMenu({
	path: that.inviteCodePosterImagePath,
	complete: function(res) {
		console.log(res);
	}
})
// #endif

5 Save pictures to camera roll

saveImage(path) {
			// #ifdef H5
			var oA = document.createElement('a');
			oA.download = '邀请码'; // 设置下载的文件名，默认是'下载'
			oA.href = path;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
			return;
			// #endif
		
			// #ifndef H5
			uni.saveImageToPhotosAlbum({
				filePath: path,
				success: function() {
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 2000
					});
				}
			});
			// #endif
		},

6 The size information of the capsule on the right side of the applet

let menuButtonInfo = {};
let systemInfo = uni.getSystemInfoSync();
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
// #endef

7 Sharing with pop-up windows (direct sharing, poster sharing)

8 scroll-view back to the top

<scroll-view scroll-y="true" class="sv" :style="{'height': 'calc(100% - ' + scrollHeight+'px)' }"
			:scroll-into-view="topItem" @scroll="scroll" scroll-with-animation @scrolltolower="searchListMore">
    <view id="all"></view>
    <view class="list-box" v-for="(item, index) in dataList" :key="index"         @click="Util.goto(`/pages/goods/info?goods_id=${item.goods_id_}`, 'navigateTo')">
    </view>
</scroll-view>

data() {
	return {
        topItem: '', // 初始一定要为空，scroll-into-view才不受影响
    }
},
methods: {
    scroll(e) {
        this.topItem = '' // 滚动以后就置空，这样每一次的topItem = 'all'，才会生效！
    },
    // 列表接口: 主要是第一页的时候，要置顶
    searchList() {
        if (this.searchForm.page == 1) {
			this.dataList = []
			this.$nextTick(() => {
				this.topItem = 'all'
			});
	    }
    },

}

9 Douyin applet to view invoices

invoiceShow(){ // 查看发票
    var that = this
    tt.downloadFile({
		url: 'https://xxxxx.pdf',
		success: function (res) {
			const filePath = res.tempFilePath
			tt.openDocument({
			filePath: filePath,
			success: function (res) {
				console.log("打开文档成功")
			},
		})},
	})
},

// 微信也有wx.openDocument