Recently, there was a need to develop H5 applications and wechat applet. It would be a very bad thing to develop your own code for different platforms: if you need to be compatible with Alipay small programs and fast applications next time, the workload will increase rapidly with the addition of platforms. So we chose uni-App development.

Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, Web (responsive), and various small programs (wechat/Alipay/Baidu/Tiaotiao /QQ/ Nail/Taobao), kuaiapp. and many other platforms.

Tool requires

  • Install the stable version of wechat Developer Tools

  • Install the HBuilderX geek developer tool

  • Chrome/Firefox /…

New project

Here you can directly refer to the website to create uni-app.

1. File => Create => Project 2. Select uni-app => Enter a project name => Select a project location => Select uni-app project template => Click CreateCopy the code

Open h5 and wechat applet

openh5:

Open wechat applet:

Example: Yes Mac configuration

  1. Configure the wechat developer tool path

  1. Open the security port of wechat applet

  1. Set the external Web service invocation URL in the format:http://local IP address: port number

  1. Lift up the wechat development tool

The development of

The next step is to develop the requirements

Are moving brick things, we briefly talk about which points need to pay attention ⚠️.

1. Size of the unit

Common CSS units supported by uni-app include px and RPX.

The conversion relationship between px and RPX is as follows:

Design 1px/Design baseline width = frame style 1rpx / 750rpx

In other words, the width of the page element in uni-app is calculated as follows:

750 * The width of the element in the draft/the baseline width of the draft

For example:

  1. If the design width is 750px and the width of element A is 100px on the design, then element A is inuni-appThe width inside should be set to:750 * 100/750, the result is: 100rpx.
  2. If the design width is 640px and the width of element A is 100px on the design, then element A is inuni-appThe width inside should be set to:750 times 100/640, the result is 117rpx.
  3. If the design width is 375px and the width of element B is 200px on the design, then element B is inuni-appThe width inside should be set to:750 * 200/375, the result is: 400rpx.

2. Network request

When online applet runs, you need to configure the domain name whitelist before using the network related API

Example:

uni.request({
    url: 'https://www.example.com/request', // demo url
    method: 'GET',
    data: {},
    header: {},
    success: res => {
        console.log(res.data)
    },
    fail: () => {},
    complete: () => {}
})
Copy the code

3. Route and page jump

NavigateTo: Keep the current page and jump to a page in the application. Use the uni.navigateBack to return to the original page.

Such as:

uni.navigateTo({ 
    url: 'pages/test? id=1&name=uniapp' 
});
Copy the code

Uni. RedirectTo: Close the current page and go to another page in the application.

Such as:

uni.redirectTo({ 
    url: 'pages/test? id=1&name=uniapp' 
});
Copy the code

Uni. ReLaunch: Closes all pages and opens to a page within the app.

Such as:

uni.reLaunch({ 
    url: 'pages/test? id=1&name=uniapp' 
});
Copy the code

Uni. switchTab: Skip to the tabBar page and close all other non-Tabbar pages.

Such as:

uni.switchTab({
    url: 'pages/index/index' // Switch to the set tabBar home index page
})
Copy the code

NavigateBack: close the current page and return to the previous page or multi-level page. You can use getCurrentPages() to get the current stack of pages and determine how many layers to return.

Such as:

uni.navigateBack()
Copy the code

4. Rich-text Specifies the rich text component

When we need to display the content with the tag name (that is, rich text), if we use the text and view components only, it will not be able to display correctly, we need to use rich-Text components.

5. Pattern configuration for small program native development

When developing debugging, you need to debug the content of a page. This configuration is necessary.

You can configure it in pages. Json, for example:

"condition": { // Mode configuration, which takes effect only during development
    "current": 0.// Active mode (list index entry)
    "list": [{
        "name": "swiper".// The name of the schema
        "path":"pages/component/swiper/swiper".// The startup page is mandatory
        "query":"interval=4000&autoplay=false"// Start parameters, which are found in the onLoad function on the page.
    }, 
    {
        "name":"test"."path":"pages/component/switch/switch"}}]Copy the code

Concrete operation:

"condition": {
   "current": 0."list": [{
       "name": "Home page"."path":"pages/index/index"
   }, 
   {
       "name":"Forget your password."."path":"pages/forget/forget"
   },
   {
       "name":"Login"."path":"pages/login/login"}}]Copy the code

6. Configure the bottom navigation

In the project’s pages. Json, configure the Pages and tabBar fields as follows:

"pages": [{"path": "pages/index/index"."style": {
               "navigationBarTitleText": "uni-app"}}, {"path": "pages/center/center"."style": {}}],"tabBar": {
   "borderStyle": "black"."color": "#8F8F94"."list": [{
       "pagePath": "pages/index/index"."text": "Home page"
   },
   {
       "pagePath": "pages/center/center"."text": "I"}}]Copy the code

Of course, you can add iconPath and selectedIconPath in the tabBar -> list field to indicate unchecked and selected status.

7. Wechat applet message forceUpdate error

TypeError: Cannot read property ‘forceUpdate’ of undefined

Cause: appId is not configured. AppIdwxa5ed8b26512accd9 is provided by the applet.

8. Conditional compilation

Use the following in the template HTML:

<! -- #ifdef H5 -->
<text>h5 content</text>
<! -- #endif -->

<! -- #ifdef MP-WEIXIN -->
<text>wechat content</text>
<! -- #endif -->
Copy the code

Use this in javascript:

onLoad() {
    // #ifdef H5
    console.log("Only the H5 platform has the console method")
    // #endif

    // #ifdef MP-WEIXIN
    console.log("Console method only available on wechat platform")
    // #endif
}
Copy the code

Release h5 and wechat applet

releaseh5:

Can refer to the official website published as H5

Finally, generate the dist file in the project. Path for page entry. / unpackage/dist/build /.. / index. HTML.

Release wechat applet:

Can refer to the website published as wechat small program

You need to apply for a small wechat program in advance and get its AppID

The latter

The relevant API content source of UNI-app is from the official website, and is the latest as of 2021-07-19.