Uni app configuration

1、 File structure

page.json// Set up app The head of 、toolbar、 And the title of the page 、 Routing settings 、 Startup page 、 Temporary Homepage 

 There is a separate label view、text, Have special properties 

2、rpx

 Regulations 750rpx = 375PX 
 therefore 1rpx =0.5px

3、 Life cycle

 whole app Life cycle of ( Written in App.vue)：
oLaunch() // Initialize execution 1 Time 
onShow()  // Initialization will execute 、 The background switch back to the foreground will execute 
onHide()  // Switching from the foreground to the background will execute 
onError() // Execute when an error occurs 

 The life cycle of a page 
onload(option)  // The initialization page is executed once , Parameters are passed from the previous page 
onShow()  // Initialization will execute 、 The background switch back to the foreground will execute 
onReady()  // Page rendering is completed 1 Time 
onHide()  // Switching from the foreground to the background will execute 
onUnload() // When the page is unloaded ‘’

onResize() // Monitor window size changes 
onPullDouwnRefresh()  // The pull-down refresh will trigger back 

4、 Upload and preview pictures

uni.chooseImage({}) // You can set the number of uploaded pages , An array will be returned after success , Array is the network connection of each picture 

uni.previewImage({}) // Click the image to trigger this method 

5、 Add notes

 Definition ： Different ports load different codes , Realize cross end requirements 
html in :
<!-- #ifdef H5 -->
<p> Hello </p>
<!-- #endif H5 -->

css in :
/* #ifdef H5 */
.test{
    color:red;
}
/* #endif H5 */

js in ：
// #ifdef H5
console.log(556)
// #endif

6、 Navigation jump to pass parameters

 Component mode ：
<navigator url="/test?id=1&test=ds"> </navigator>
api The way ：
uni.navigateTo({
    url:"/test?id=1&test=ds"
})

onLoad(option){ }//onLoad Lifecycle receive parameters 

7、 Component creation and use

 establish vue The document is elsewhere vue Used in documents import Introduce and in conponent Registered on 

 Component lifecycle and vue The same as , Page is not , It has its own 

8、 Extension components

 Some functions are not officially available , You can download and import , Like the calendar 

9、 Customize global events （ Value transfer between sibling components ）

a Components 
uni.$on("mytes",res=>{
    this.num = res
})

b Components ：
uni.$emit("mytes",10)

 Father's son ： Attribute binding , Child components prop Property receive 
 Son father ：this.$emit(test,ff)  Custom event value transfer 

Map

<map class="map" :latitude="23.185217" :longitude="113.478258"> </map>

// Coordinates can be picked up by Baidu map 
http://api.map.baidu.com/lbsapi/getpoint/index.html

Trigger dialing ：

uni.makePhoneCall({
	phoneNumber:"123456"
})

Add shopping cart plugin , Bottom navigation bar

GoodsNav  Commodity navigation 

Upload the code to wechat public platform

manifast.json File configuration appId ==> WeChat developer tools ==》 Upload button ==》 Submit audit 

H5 pack

manifast.json==》 Fill in the software name ==》 issue ==》H5 ==》 Generate a packaged file 

app pack

manifast.json==》 Basic configuration and APP To configure  ==》 Set the software picture 、 Start the figure ==》 issue 
==》 Native APP pack ==》 Generate installation package link 

Generate Android Certificate ：

 Open the command line as an administrator , Get into jdk Of bin, Such as cd C:\Program Files\Java\jdk1.8.0_191\bin

 Enter the command ：
keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 1000
 Next, enter the password , Alias 
 After input y confirm , You will be prompted to enter the following ：
keytool -importkeystore -srckeystore debug.keystore -destkeystore debug.keystore -deststoretype pkcs12

 Copy and then enter , stay C:\Program Files\Java\jdk1.8.0_191\bin Generate under directory store file 

 Alias ：androiddebugkey
 password ：uuuuuu
 Certificate name ：debug.keystore

2、 Generate address online 
http://www.applicationloader.net/appuploader/keystore.php

Compatibility issues ：

 Form label-width='0' label='' , In the applet, it will be displayed as 'true';
 solve ：label-width='0',label=' '  // One more space is 

 stay h5 The following will not be detected tabbar,
 Use   height: var(--window-bottom); // stay h5 yes tabbar Height , stay app、 The applet is 0;

 Not in UI Add your own style on the unique label of the frame , A layer should be added to the unique label <view>, Otherwise, the applet does not support 

iphone The rolling is not smooth .
 solve ：
 overflow: auto;
 -webkit-overflow-scrolling: touch; 


 The default value of the frame 
 Do not use when circular assignment is required  item.value, change to the use of sth. datarr[index].value

Page does not scroll 、 The box in the page scrolls, and the whole page drops down

 solve ： stay page.json Setting prohibits the whole page from pulling down and up 
				{
					"path": "myOrderList/myOrderList",
					"style": {
						"disableScroll": true,
						"navigationBarTextStyle": "white",
						"navigationBarTitleText": " My order "
					},
					"app-plus":{
						"scrollIndicator": "none",//app Inside the unrealistic scroll bar 
						"bounce":"none" //  Turn off the rebound attribute 
					}
				}

When the page jumps back , With parameters

 On the last page onShow in ：
uni.$on("handClickXXX", res => {
    console.log(res);
    //  Clear listening 
    uni.$off('handClickXXX');
})

 Click to return to this page ：
uni.$emit("handClickXXX",{data: item,index: index});
uni.navigateBack();

Click back to control the jump

onBackPress(options) {
	uni.redirectTo({
		url: "/pages/index/index" // Adjust to the specified page 
	})
	return true;
},

solve space-evenly Compatibility problem

container{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
       //justify-content: space-evenly;
      &:before,
      &:after {
          content: '';
          display: block;
    }
}

Navigation bar height

<view class="title-bar" :style="{'padding-top':statusBarHeight+'px'}">
</view>
GetStatusBarHeight() {
	let that = this;
	uni.getSystemInfo({
		success: function (res) {
				that.statusBarHeight = res.statusBarHeight;
		},
	});
},

css:
padding-top: var(--status-bar-height);