Writing wechat applet with uni app

Catalog

Basic configuration of the page

tabBar Set up

uni-app introduce vantUi

Set dynamic top text

encapsulation axios request

The life cycle function of the applet   uni-app Compatible with

Enable / disable pull-down refresh

Customize the applet navigation bar

uni-app Subcontracting of

uni-app The routing   Wechat applets are the same except for different prefixes

---

Basic configuration of the page

backgroundColor	Pull down the refreshed background color , The drop-down refresh part is the background
backgroundTextStyle	Background text style of the applet   Only light light colour and dark Dark Two values
navigationBarBackgroundColor	The background color of the navigation bar
navigationBarTitleText	The title text of the navigation bar
navigationBarTextStyle	The text color of the navigation bar   Only black black and white white Two values
enablePullDownRefresh	Turn on the pull-down refresh function   The default value is false
onReachBottomDistance	The distance to trigger the bottom touch method   The unit is px

tabBar Set up

stay uni-app Medium pages.json To configure

 "tabBar": {
    "color": "#000000",  // The font color 
    "selectedColor": "#d00",  // Selected font color 
    "borderStyle": "black",
    "backgroundColor": "#ffffff",  // The background color 
    "position": "top",      //  Top tabBar, The default is bottom
    "list": [{
        "pagePath": "pages/index/index",  // Page path 
        "text": " home page ",
        "iconPath": "static/icon/shouye.png",  // The color of the unselected icon 
        "selectedIconPath": "static/icon/pitch-icon/shouye.png"
      },
 }

matters needing attention

1 tabBar At least two. , Up to five

2 The following font icons need two colors , Unselected and selected , It is recommended that after downloading , Use as a picture

3 When tabBar When set to the top , There will be no more icons , Only words

uni-app introduce vantUi

1   Built-in terminal npm install vant Applet version

2   newly build wxcomponents Folder , Copy @vant Inside dist Folder . And paste it and rename it vant

3 It can be deleted because vant Generated folder

4  Normal introduction vant what is needed , But the file path is “/wxcomponents/vant/.....”

5  stay pages.json in Modify the configuration . Make it usable vant and npm To configure , The specific code is as follows

Set dynamic top text

pages.json in , When creating a new file , The corresponding data will be automatically added , You can set the header text here , Can also be introduced vant The style of

 "path": "pages/list/list",
    "style": {
      "navigationBarTitleText": " list ",
      "enablePullDownRefresh": false,
      "usingComponents": {
        "van-icon": "/wxcomponents/vant/icon/index",
      }
    }

encapsulation axios request

establish utils Folder , Add... To the folder http.js file

function axios({
  url,
  method = "get",
  data = {}
}) {
  uni.showLoading({
    title: ' Desperately loading ...',
    mask: true
  })
  return new Promise((resolve, reject) => {
    uni.request({
      url: "https://www.uinav.com/api/public/v1" + url,
      method,
      data,
      success(res) {
        resolve(res.data)
        uni.hideLoading()
      },
      fail(err) {
        reject(err)
        uni.hideLoading()
        uni.showToast({
          title: " request was aborted "
        })
      }
    })
  })
}



export default axios

When using the page

introduce

  import axios from '../../utils/http.js'

Use

 axios({ url: '/home/swiperdata'}).then(res => {
        console.log(res)
 })

The life cycle function of the applet   uni-app Compatible with

onLoad	Trigger when the page loads         amount to vue Of created Life cycle
onReady	Triggered when the page is first rendered       amount to vue Of mounted Life cycle
onShow	Page shows / Trigger when entering the front desk     amount to vue Of  activited
onHide	Page hidden / Trigger when cutting into the background     amount to vue Of deActivited
onUnload	Trigger when the page is unloaded            amount to vue Of destroyed Life cycle
onPullDownRefresh	Drop down refresh hook function
onReachBottom	Pull up to the loaded hook function

Enable / disable pull-down refresh

uni.startPullDownRefresh()      //  Turn on the pull-down refresh function

uni.stopPullDownRefresh()      //  Stop the method of pull-down refresh

And in the wechat applet , It is wx.startPullDownRefresh()  

Customize the applet navigation bar

1 On the page to be used pages It defines   "navigationStyle":"custom"

2 Define a subcomponent , This sub component is the customized header navigation bar , In this component No, onLode, have access to mounted

  uni.getSystemInfo({})  You can get the basic information of the mobile phone  

  statusBarHeight For the height of the mobile navigation bar

3 Use the page to import this component , You can normally use parent-child components to pass values

Be careful ： If the click event does not take effect in this component , You can try to trigger a child to parent incoming event

uni-app Subcontracting of

1 pages Is the location of the page used by the applet , With it At the same level The location of , Create subcontracting folder , Create the corresponding file , The format is as follows

 

2 stay pages.json in , Configuration subcontracting

   "subPackages": [{
    "root": "packageOne",
    "pages": [
      
    {
      "path": "search/search",
      "style": {
        "navigationBarTitleText": " Commodity search ",
        "enablePullDownRefresh": true,
        "backgroundColor": "#d00",
        "onReachBottomDistance": 260
      }
    }
    // Add another page here ,{path:....,style....}
  ]  }]

root attribute Is the name of the subcontracting folder ,pages Array , Place subcontracting pages , The rest and pages The page configuration of the folder is consistent

uni-app The routing   Wechat applets are the same except for different prefixes

Tag jump

Tag name

<navigator url="/pages/home/home"  open-type="navigate"></navigator>

open-type Parameters

navigate	Will hide the current page Go to the new page   Page stack up to ten layers
redirect	Will destroy （ close ） Current page Go to the new page
switchTab	Specifically for jump tabbar page He will destroy all non - tabbar page
navigateBack	close Current page , Return to the previous level or multiple levels
reLaunch	Jump tabbar page , Will close all pages Go to the new page

Logic jump

uni.navigateTo(OBJECT)	Keep the current page , Jump to a page in the app
uni.redirectTo(OBJECT)	Close current page , Jump to a page in the app
uni.reLaunch(OBJECT)	Close all pages , Open to a page in the app .
uni.switchTab(OBJECT)	Jump to tabBar page , And shut down all the others tabBar page
uni.navigateBack(OBJECT)	Close current page , Go back to the previous page or multi-level page It can be done by  getCurrentPages()  Get the current page stack , Decide how many layers you need to go back
uni.preloadPage(OBJECT)	Preload the page , It's a performance optimization technology

Routing parameters and receiving parameters

  Be careful ：switchTab Can't pass parameters

  The ginseng ：wx.redirectTo({  url: '/pages/home/home?id='+id })

  receive ： Loaded on the listening page onLoad Function parameter options Object