Use ali font icon library

  1. In ali icon official website, the icon to be used, add to the shopping cart

  2. Add icon to project

  3. Pyg — “Font class (using ICONS in a class way) –” view online links

  4. In the styles folder of the project create the iconFont. WXSS file

  5. Open the link and copy the contents of the link to the iconfont. WXSS file

  6. Use fonts from the Font icon library

    1. In the global WXSS file, import the WXSS file

      @import "./styles/iconfont. WXSS "copies the codeCopy the code

    2. use

      <text class="iconfont icon-shoucang"></textCopy the code

tabBar

Configure it in app.json

TbaBar: {"color": "", // unselected font color" selectedColor": "", // selected font color" backgroundColor": "", // backgroundColor" position": Positioning ", "/ /" borderStyle ":" ", / / border style "list" : [{" pagePath ":" ", / / the path of the page "text" : "", / / the name of the title" iconPath ": "", // unselected icon path "selectedIconPath": "" // selectedIconPath}]} copy codeCopy the code

Initialization of the page style

Note: Wildcard characters (*) are not supported in applets

In the app.wxss file

page,view,text,swiper,swiper-item,image,navigator { padding: 0; margin: 0; box-sizing: border-box; } /* Theme color 1. Less is a variable 2. Native CSS and WXSS also support CSS */ page {--themeColor: #eb4500; Font: 28rpx; color: RGB (50, 50, 50); font-size: 28rpx; } Duplicate codeCopy the code

Use theme colors:

view { color: var(--themeColor); } Duplicate codeCopy the code

The head

Set the theme color:

"The window" : {" backgroundTextStyle ":" light ", / / font color "navigatorBarBackgroundColor" : "#2b4500", // Background color "navigatorBarText": "Vipshop ", // font prompt "navigatorBarTextStyle": "white", // font style} duplicate codeCopy the code

Using interface data

Page({data: {swiperList: []}, // Page load event onLoad () {/* 1. */ wx.request({url: "", // interface address success: (result) => {// This. SetData ({swiperList: result.data.message})}}); /* wx.request Too many asynchronous requests can create callback hell: PROMISE in ES6 */}}) copy the codeCopy the code

Request error (two solutions):

  1. In a small programdetailsClick on the interfaceVerify valid domain names, Web-view (business domain names),TLS versions, and HTTPS certificates
  2. For configuring the request interface, see 8.7. Add the domain name requested by the applet to the background

Fix callback hell (PROMISE of ES6)

Create the index.js file in the request folder of your project

It is used by encapsulating methods and then calling functions to pass parameters

// let ajaxTime=0; export const request=(params) => { ajaxTime++; Wx.showloding ({title: "loading ", mask: true}); wx.showloding ({title:" loading ", mask: true}); Return new Promise((resolve, reject) => {wx. Request ({// params, success: (result) => { resolve(result); }, faile: (err) => { reject(err); }, // Call this function complete on success or failure: () => {ajaxTime--; If (ajaxTime === 0) {// Close waiting icon wx.hideloading (); }}}); }); } Duplicate codeCopy the code

Use the encapsulated request method:

// Import {request} from '.. /.. /request/index.js'; Page({data: {swiperList: []}, // Page load event onLoad () {/* 1. */ /* wx.request({url: "", // interface address success: (result) => {// This. SetData ({swiperList: result.data.message})}}); */ /* Wx. request too many asynchronous requests can create callback hell: ES6 Promise */ // call the method this.getswiperList (); }, // call the wrapped method getSwiperList() {// The data filled here will replace the request method... params, request({ url: 'htltps://api/zbtbs/home/swiperList'}); Then (result => {this.setData({swiperList: result.data.message})}); }})Copy the code