Common development skills for uniapp

Table of contents

1. Mini program sharing

Since WeChat does not have this function for sharing friends and Moments by default , if you need to add it, you need to configure the code separately. The configuration is also very simple and you only need to write a corresponding life cycle (at the same level as data).

Share with WeChat friends

	onShareAppMessage(){
			return {
				 title: '自定义分享标题',
			}
		},

You can also use the sharing function without filling in the parameters by default, but it is executed according to the default parameters.

parameter name	type	Required	illustrate	Platform differences explained
title	String	yes	share title
path	String	yes	Page path must be a complete path starting with /. Note: Do not add '/' at the beginning of Jingdong Mini Program	QQ mini program does not support
imageUrl	String	no	Share icon, the path can be a local file path, a code package file path, or a network image path. Supports PNG and JPG. Display image aspect ratio is 5:4
content	String	no	Baidu mini program behaves as: sharing content; Alipay mini program behaves as: Zhikou command copywriting	Baidu Mini Program, Alipay Mini Program
desc	String	no	Custom sharing description	Alipay mini program, Douyin mini program, JD mini program
bgImgUrl	String	no	Customize the background image for sharing the QR code, the recommended size is 750*950 (network image path)	Alipay applet
query	String	no	QQ applet query string must be in the format of key1=val1&key2=val2. After entering from this forwarded message, the query in the launch parameters can be obtained through qq.getLaunchOptionSync() or qq.onShow().	QQ applet
templateId	String	no	The shared material template ID set by the developer's backend	Douyin mini program
mpId	String	no	WeChat applet id. This scenario is used in this scenario. After sharing to WeChat, the user clicks the share card to enter the WeChat applet corresponding to the appid to achieve drainage to the WeChat applet.	Jingdong Mini Program
type	Number	no	Forwarding form (0 - official version of WeChat Mini Program; 1 - development version of WeChat Mini Program; 2 - trial version of WeChat Mini Program; if not filled in since JD App 9.0.0 or other values will first determine whether there is a url parameter, if there is, open the sharing Display the page corresponding to the url, otherwise an official sharing intermediate page of the JD mini program will be generated by default. Click to jump to the corresponding mini program in the JD app.)	Jingdong Mini Program
mpPath	String	no	WeChat Mini Program Path	Jingdong Mini Program
channel	String	no	Channel (do not write the default WeChat friends, WeChat Moments)	Jingdong Mini Program
url	String	no	h5 link address (fill in h5 sharing, default middle page if not filled in)	Jingdong Mini Program
success	Function	no	Callback function for successful interface call	Alipay mini program, Baidu mini program
fail	Function	no	Callback function for interface call failure	Alipay mini program, Baidu mini program
complete	Function	no	The callback function at the end of the interface call (executed whether the call is successful or failed)	Baidu Mini Program

Share WeChat Moments

onShareTimeline() {},

However, only individual pages can be shared and configured. If you want to share each page, you can register the mixin globally.

utils/mixin.js

export default {
	data() {
		return {}
	},
	//1.发送给朋友
	onShareAppMessage() {},
	//2.分享到朋友圈
	onShareTimeline() {},
}

main.js

// 导入并挂载全局的分享方法
import share from './utils/mixin.js'
Vue.mixin(share)

2. Adapt to the bottom distance of ios

<view class="flexC submit ">
	  <view class="flexC">提交</view>
</view>

.flexC {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.submit {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		view {
			border-radius: 10px;
			width: 90%;
			height: 80rpx;
			background: skyblue;
			color: #fff;
		}
	}

This is a very common scenario. The button is fixed at the bottom of the page to facilitate user operation. It is displayed normally on Android, because there is a menu horizontal line at the bottom of iOS which will cover it.

Just add a class name

<view class="flexC submit iosPadding">
	<view class="flexC">提交</view>
</view>

<style lang="scss">
.iosPadding {
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
</style>

safe-area-inset-left: The distance between the safe area and the left boundary

safe-area-inset-right: The distance between the safe area and the right boundary

safe-area-inset-top: The distance between the safe area and the top boundary

safe-area-inset-bottom: The distance between the safe area and the bottom boundary

3. Platform conditional compilation

Because uniapp is a multi-terminal development framework, compiling a set of code into multiple applications cannot avoid using conditional compilation.

What is conditional compilation?

For example: I want to package it into h5 and also want to package it into a small program. I want to share a public account in h5, but these jssdk parameters do not need to be obtained in the small program. At this time, I can use conditional compilation to only execute a certain function on the h5 platform. snippet of code.

Vernacular: Different platforms execute different code

Official: Conditional compilation uses special comments as marks . During compilation, the code in the comments is compiled to different platforms based on these special comments.

**Writing:** Start with #ifdef or #ifndef plus %PLATFORM% and end with #endif.

#ifdef: if defined only exists on a certain platform
#ifndef: if not defined exists except for a certain platform
%PLATFORM%: platform name

Conditional compilation writing method	illustrate
#ifdef APP-PLUS requires conditional compilation of code #endif	Code that only appears under the App platform
#ifndef H5 code that requires conditional compilation #endif	In addition to the H5 platform, codes that exist on other platforms
#ifdef H5 \|\| MP-WEIXIN code that requires conditional compilation #endif	Code that exists on the H5 platform or WeChat mini program platform (there is only \|\| here, && is impossible because there is no intersection)

For example:

(1) js conditional compilation

	onLoad() {
			// h5
			//#ifndef H5
				console.log(1);
			//#endif 
			// 小程序
			//#ifndef MP-WEIXIN
				console.log(2);
			//#endif 
		},

(2) HTML conditional compilation

	<view class="flexC submit iosPadding">
		<!-- #ifdef H5 -->
		<view class="flexC">H5提交</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="flexC">微信小程序提交</view>
		<!-- #endif -->
	</view>

(3) css conditional compilation

	// #ifdef H5
		.submit view {
			background: blue;
		}
	// #endif

	// #ifdef MP-WEIXIN
		.submit view {
			background: red;
		}
	 // #endif