I. Start of uniAPP Project:
1. Tool download
Download the APP version of HBuilderX and the wechat developer tool on Dcloud’s website
2. Project creation
Set up uni-App project according to uni-app document.
3. Settings of wechat developer tools
Open wechat Developer Tools -> Settings -> Security -> Open service port/Settings -> Proxy -> Use system proxy
4. Project operation
Open HBuilder-> Run -> Run to mini program emulator successful execution will tune up wechat developer tools, and run the mini program. Compiling and saving on HBuilder will update wechat editor in real time. Note: If you skip the third step and directly execute the fourth step, an error will be reported and the operation fails.
5. An error occurs during operation
When creating a project, some projects may use SCSS/SASS. At this time, we will execute the error, as prompted, you can choose the corresponding plug-in in the Tools -> plug-in market. Note: There are many templates or components already written in the plugin market, but note that some templates or components overwrite index files, so be careful when importing them.
6. General grammar
Uniapp has roughly the same syntax as Vue, for example
<text @click=”open()” v-model=”searchVal” v-for=”(item) in navList” :key=”item.state” >
Note: :key=”item.state” if not written, applet will prompt
7. Appid:
The release of small programs requires an AppID and needs to be added as a developer on wechat’s development platform. You can use the test appID in the development environment, you can not set it in uniApp, but you need to set the appID in manifest.json when publishing. It is important to note that if you set the appID, it will not start if other people have your project and are not the developer. However, you can run it by deleting the id configured in manifest.json.
8. Domain name type
The interface of the formal environment of the small program must be HTTPS, but we can in the development of wechat developer tools -> details -> local Settings -> check the legitimate domain name, web-view (business domain name)…… , so that you can access the interface normally. (Add: the interface domain name of the official environment needs to be added on the platform of wechat mini program)
9. Release of applets:
Need point distribution on HBuilder – > select small program – WeChat he would package and let you fill in the project name and the appid (if you have to fill in after will automatically fill up), packaging complete will re-open a new small application project, upload in WeChat developer tools in the developer platform after submit audit experience or set edition.
Ii. Life Cycle:
Application life cycle:
The application lifecycle can only be listened on app.vue, not on other pages.
The most common is that the onLaunch is triggered globally only once, usually to initiate a small program or to make a login decision
Page life cycle:
Common page life cycles:
1. The onLoad:
Listen to the page load, its parameter is the data passed in the previous page, the parameter type is Object (used for page parameter), generally in this request interface initialization page data.
For example, if an object is transferred from a to B, it needs to be converted into a string and then transferred. After the page receives the parameter, it needs to be converted. Note that too long will be truncated by the URL and the delivery will fail. But we can encode and send encodeURIComponent().
A page
wx.navigateTo({
url: “/pages/index/index? id=” +Id
})
B page
onLoad: function``(options){
let Id = options.Id;
}
2. OnShow:
Listen to the page display. Trigger every time a page appears on the screen, including returning from a sub-page point to reveal the current page, or receiving passed parameters like onLoad, which can be used to get shared parameters when someone shares them with you to do something.
3. OnPullDownRefresh:
It is used for pull-down refresh. EnablePullDownRefresh: true must be set in the JSON file to trigger the pull-down refresh.
4. OnTabItemTap:
Triggered when TAB is clicked with Object. This event is triggered when tabbar is clicked. After tabbar is loaded, onLoad will not be triggered and data will not be loaded again. At this time, we can use this event to refresh the page, or write the load of data in the onShow.
5. OnShareAppMessage:
Users click on the upper right corner to share generally as users actively click the button to share small programs
// open-type=”share
onShareAppMessage(res) {
- If (res.from === ‘button’) {// From the share button within the page
console.log(res.target)
return {
Title: 'Easy carton: Master factory anytime and anywhere ',
path: '/pages/login/login',
imageUrl: '.. /.. /static/share.png',
}
}
}
Path: ‘/pages/login/login’, // here can be arguments like jump page, receive place onLoad/onShow
6. Official Documents:
uniapp.dcloud.io/frame? Id = Life cycle
Iii. Global variables:
1. Set it through Storage
Page A goes to page B and obtains data
A: Set the cache
uni.setStorageSync('newMember', this.newMember); // Set the cache
B: Obtain cache
Let STR = uni.getStorageSync('newMember') // Get cache
Uni.removestoragesync ('newMember') // Remove the cache
2. getApp()
The globalData // globalData sample object needs to be set in app.vue only for unified management
getApp().globalData.currentOrderTab = 1; // Set variables
this.tabCurrentIndex = getApp().globalData.currentOrderTab; // Get variables
Iv. TabBar Page and ordinary page:
1. The tabbar:
1. Switch to the page and transfer parameters: switchTab; Can’t
2. OnLoad trigger: trigger only once when opened for the first time
3. Pages. Json configuration: Both pages and tabBar are required
4. Return in the upper left corner: No return button
2. General:
NavigateTo/redirectTo navigateTo/redirectTo can
2. OnLoad trigger: Trigger every time you open it
3. Pages. Json configuration: This configuration is required only on pages
4. Return in the upper left corner: with return button
Five. The way of page skipping:
NavigateTo, reLaunch, redirectTo, switchTab
1.navigateTo
NavigateBack (uni. NavigateBack) navigateBack (uni. NavigateBack) navigateBack (uni. NavigateBack)
Note that navigateTo can only jump
The path of non-tabbar pages in the application, with parameters after the path;
If the redirect URL parameter is tabBar, the redirect cannot be performed
2.redirectTo
Close the current page and switch to a page in the application.
Indicates the path to non-tabbar pages in the application that you want to jump to. The path can be followed by parameters
3.reLaunch
Close all pages and open to a page within the app.
Intra-application page path to which you want to jump. Parameters can be set after the path. Between parameters and paths? Parameter keys and parameter values are connected with =, different parameters are separated with &; Such as’ path? Key =value&key2=value2′. Unlike redirectTo, if the page path is tabBar, no arguments can be added
4.switchTab
Jump to the tabBar page and close all other non-Tabbar pages.
This parameter specifies the path to the tabBar page that you want to jump to
Note: tabBar pages need to be defined in the tabBar field of pages. Json
Tabbar does not load onLoad when jumping to tabbar. If you need to refresh the page when jumping to babbar, you can perform the following operations:
Jump to refresh page:
uni.switchTab({
url: ‘/pages/order/order’,
success: (e) => {
let page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
});
Vi. Development
1. Customize the navigation header
2. Adaptive height of the scrollview
try {
const getSystemInfoSyncData = uni.getSystemInfoSync(); // Obtain system information
this.pageHeight = (getSystemInfoSyncData.screenHeight * (750 / getSystemInfoSyncData.screenWidth) – 88 – 32 – 72) + ‘rpx’; // screenHeight: – is the height of your fixed head. And convert px to RPX
// console.log(‘pageHeight’, this.pageHeight)
} catch (e) {
// error
}
Do not use windowHeight/windowWidth, which is the height/width available. On some phones with navigation bars, opening the page while displaying the system navigation bar and then hiding the navigation bar will cause the original navigation bar position to be blank.
3. Insert token in request header
Let SetHeader = {// Set request headers and tokens
‘context-type’: ‘application/x-www-form-urlencoded’,
‘Cookie’: `token=` + uni.getStorageSync(‘token’)
}
uni.request({
Url: ‘www.example.com/request’, // this is an example, not a real interface address.
data: {
text: ‘uni.request’
},
header: SetHeader,
success: (res) => {
console.log(res.data);
this.text = ‘request success’;
}
});
4. Interface layout
1. Uniapp only supports display:
Flex layout, the view tag defaults to 100% width, so margin: 0 auto will not work if you want to center elements. Justify -content: center will not work
2. Height collapse:
If the height of an element collapses because there is no content: you can set a total height for the parent element and then set the height for the child element. Setting the child element separately does not work.
3. V-for does not display the page
80% of the data is empty, if the data is not guaranteed to be available in the case of some of the things presented need to write dead, or create a base data and then overwrite it if there is data
4. Native/UNIAPP background
Small program native can not normally display background map needs to be turned into Base64, UniAPP write background map will help you turn into Base64
5. Unit of size
It’s much easier to write in RPX units
6. The pit:
1. picker
When using picker values can only be separated by – otherwise on ios events are bound to {{data}} from the first month of the first year. See the uniapp documentation for details
2. The scroll bar requests data to reset the scroll distance
If one TAB header shares a data source, the scroll distance is not reset during switching, so you can clear the data before assigning
3. Want to refresh tabBar but it has secondary page, secondary page return does not want to refresh tabBar page
The tabbar page does not refresh during switching, but we can do this with onShow, but one of the features of onShow is that the display of the page must refresh but sometimes we don’t expect this, for example when we have a detail page we don’t want it to refresh. We can do this using onTabItemTap (triggered when a TAB is clicked and the argument is an object)
4. {{}} toFixed
Small program in {{}} using toFixed will report an error, can write a separate variable for processing and then assign value
5. Enter the SearchBar component in English
If English letters are associated with the search component, you must select them. Otherwise, the input value cannot be obtained
When using the SearchBar SearchBar, you encounter English input without clicking on the above optional direct search will not get the input content, here you can add a loss of focus time in the loss of focus events for query. However, since the search event will be triggered first, it is necessary to call the out-of-focus event in the search criteria and then conduct the interface query. If you do not want the out-of-focus event to be triggered in addition to clicking search, you can add a parameter judgment in the search button
6. Execution sequence of onLoad/onTabItemTap
Normally, onload is executed first
However, in ios wechat 7.0.15, onTabItemTap will be executed before onLoad, and this problem may also exist in earlier versions
7. Modifying the input value v-model does not take effect
this.$nextTick(() => {
this.productHeight = val;
});