Wechat small program framework building

Foundation frame construction

NPM support

The official documentation

1. Create a project and execute it in the project root directory

npm install
npm install dayjs --save
Copy the code

2. After the success will automatically create a package. Json, package. The lock, node_modules file

3. Click “Tools” -> “Build NPM” to complete the build, and a success message will pop up

4. Select the “Use NPM module” option

5. Once the build is complete, you can use the NPM package

const dayjs = require('dayjs')
console.log(dayjs)
Copy the code

Less support

The advantages of less are not detailed. Wechat developer tools do not support less, but wechat small programs can share plug-ins with VScode, so vscode plug-in Easy Less can be used for translation

Start by installing the plug-in from vscode

Find the plug-in file (temporarily open the folder)

Open the wechat applet plug-in

Switch to Extensions -> Editor to customize the extension

Open the extensions folder and paste the Easy Less plug-in into that folder

Go back to wechat developer tools and turn on the plug-in switch

Note: If you do not restart the wechat developer tool

Go to Settings -> Editor -> More and Workspace Editor Settings…

Switch to JSON mode

Paste the following code into the outermost object, as shown

The following code

"less.compile": {
  "outExt": ".wxss"
}
Copy the code

This configuration means that all *. Less changes are synchronized to the. WXSS file in the same directory. Therefore, a. Less file must be created after each new page is created. Since the plug-in only escapes LESS to CSS and does not modify it backwards, you must only modify less files.

Restart the wechat developer tool. The effect is shown (less on the left, WXSS on the right)

The subcontract

The official documentation

Because the single package mode of small programs has a capacity limit of 2M, it can be divided into different packages according to different service logic for scalability, which can ensure the maximum delay in reaching the capacity limit. Of course, subcontracting is also limited.

Different subcontracts cannot refer to each other, but each subcontract can refer to the main package part

Based on the above principle, the subcontracting logic needs to be isolated from each other, and common code can be placed in the main package

Graph TD primary package --> primary package -- Components primary package --> primary package -- Pages primary package -- Behaviors primary package --> primary package -- utils primary package --> Subpackage 1 --> Subpackage 1 -- Components Subpackage 1 --> contract 1-pages contract 1 --> contract 1-utils contract 2 --> contract 2-components contract 2 --> contract 2-pages contract 1 --> contract 1-utils contract 1 --> contract 2-components contract 2 --> contract 2-pages contract 1 --> contract 1-utils contract 1 --> contract 1-utils contract 2 --> contract 2-pages contract 1 --> contract 1-utils contract 2 --> contract 2-components contract 2 --> contract 2-pages contract

tip

Here is the code for some common functions of the project

The filter filter

The small program does not support filter function in VUE, but can be implemented by WXS (click to visit official).

// foramt.wxs

var format = {
  // Format.00 2 bits precision
  f2: function (str) {
    if (str) {
      var num = parseFloat(str)
      return num.toFixed(2)}else {
      return '0.00'}}}module.exports = {
  f2: format.f2
}


// foramt.wxs

<wxs src=".. /.. /filters/formatPrice.wxs" module="formatPrice" />
<view>{{formatPrice.f2(price)}}</view>
Copy the code

Note: Only WXS file modules can be referenced in. WXS modules, and non-WXS modules cannot be referenced, so third-party JS libraries such as Moment and Lodash cannot be referenced.

Exception reporting

Wechat official provides a front-end log collection system. When the official log is used, the log will be reported to the wechat background in real time, which is convenient for error correction and free of charge. The official support and the speed is good, so it is recommended to use this method for error correction. The official documentation

Since the library is only for reporting and the native debug phase still relies on console output, an util method is encapsulated and the native log output completes reporting at the same time.

// log.js

var log = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null

module.exports = {
  debug() {
    console.log(arguments)
    if(! log)return
    log.debug.apply(log, arguments)},info() {
    console.info(arguments)
    if(! log)return
    log.info.apply(log, arguments)},warn() {
    console.warn(arguments)
    if(! log)return
    log.warn.apply(log, arguments)},error() {
    console.error(arguments)
    if(! log)return
    log.error.apply(log, arguments)},setFilterMsg(msg) { // Support from base 2.7.3
    if(! log || ! log.setFilterMsg)return
    if (typeofmsg ! = ='string') return
    log.setFilterMsg(msg)
  },
  addFilterMsg(msg) { // Support from base 2.8.1
    if(! log || ! log.addFilterMsg)return
    if (typeofmsg ! = ='string') return
    log.addFilterMsg(msg)
  }
}

// xxx.js

const log = require('./log')
log.debug('Debug output')
Copy the code

Custom fonts

@font-face SRC does not support the import of @font-face SRC, but does provide javascript import online font, so we can import custom fonts, font ICONS. The official documentation

Import online Fonts

// app.js

App({
  onLaunch() {
    console.log('111')
    // Load the font
    wx.loadFontFace({
      global: true.family: 'Bitstream Vera Serif Bold'.source: 'url("https://sungd.github.io/Pacifico.ttf")'.success(e) {
        console.log(e)
      },
      fail(e) {
        console.log(e)
      }
    })
  }
})

Copy the code

// index.wxml online font<view  style="font-family: 'Bitstream Vera Serif Bold'">
    Bitstream Vera Serif Bold
  </view>The default font<view>
    Bitstream Vera Serif Bold
  </view>
Copy the code

rendering

The fonts icon

Take Alibaba Iconfont as an example.

Find your own icon project select Unicode and copy *.ttf corresponding link. And referenced in app.js

// app.js

App({
  onLaunch() {
    wx.loadFontFace({
      global: true.family: 'iconfont'.// Use your own copy path to obtain this address
      source: 'url("https://at.alicdn.com/t/font_1621640_xz0ea7squ9j.ttf")'.success(e) {
        console.log(e)
      },
      fail(e) {
        console.log(e)
      }
    })
  }
})

Copy the code

Return to the iconfont page, click download to local, and open the iconfont. CSS file

Paste everything except the @font-face tag into WXSS where the applet needs to use the page

Like my WXSS file

.iconfont {
  font-family: "iconfont" ! important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-huiyuan:before {
  content: "\e8b1";
}

.icon-shijian:before {
  content: "\e8b8";
}

.icon-shoucang:before {
  content: "\e8b9";
}

.icon-shouye:before {
  content: "\e8ba";
}

.icon-huiyuan1:before {
  content: "\e8c5";
}

.icon-shijian1:before {
  content: "\e8c6";
}

.icon-shouye1:before {
  content: "\e8c7";
}

.icon-shoucang1:before {
  content: "\e8c8";
}


Copy the code

wxml

  <view class="iconfont icon-huiyuan1"></view>
  <view class="iconfont icon-shijian"></view>
  <view class="iconfont icon-shoucang"></view>
  <view class="iconfont icon-shouye"></view>
Copy the code

The effect