Small program - third-party library, custom build, subpackage pre-download, getApp

Third-party component library - npm support - remember that the node package of the applet cannot be used directly

And build npm in the tool! ! ! ! ! ---Otherwise an error will be reported

miniprogram-computed - npm --- This is the documentation for computed

--------------------------------------------------------------------------------------------------------------------------------

npm support - custom builds

1. Create a new mini program project
2. Create a folder: miniprogram
3. Move the corresponding files of the project into the file

    `pages、app.js、app.json、app.wxss`

4. Configure in `project.config.json`: **`"miniprogramRoot": "miniprogram/",`**, this step is to reset its root directory

5. Configure in project.config.json:

"setting": {
  ...
  // 开启手动构建
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./miniprogram"
    }
  ],
}

- `packNpmManually` enable npm build manual configuration
- `packNpmRelationList` manually build npm configuration details
- `miniprogramRoot` customize the root directory of the mini program

After configuration, you can download the plug-in ui library and the like. After downloading the ui library, you can see how it is configured in other documents. After everything is deployed, we press the tool above and then press create npm, there will be such an error

The solution is to restart the WeChat applet development tool. At this point, you can click to create npm. After creation, an error will be reported. At this time, you only need to create npm again to solve the problem.

--------------------------------------------------------------------------------------------------------------------------------

Framework interface - getApp

wx is not needed when getApp is used.

1. It is the public object, method, etc. written in app.js. Which page or component do you want to use? Just call getApp() there to get the things in app.js,,,,, for example -- const app = getApp()    console.log(app.name) gets the name value in app.js

The code in app.js should be written to App({中})

--------------------------------------------------------------------------------------------------------------------------------

Framework Interface - getCurrentPages

getCurrentPages can be used to get the contents of the page stack

--------------------------------------------------------------------------------------------------------------------------------

Built-in API - Local Storage

There are: wx.setStorageSync--store a data locally

wx.getStorageSync--read a local data

wx.removeStorageSync---delete a data stored locally

wx.clearStorageSync---clear the data stored locally

Local storage in the applet can directly store data of object or array type, without JSON.stringify for processing

存入数据

page({
 存入本地数据
点击事件(){
 wx.setStorageSync('name','小明')  前面的是存储的命名，后面的是存储的值

 wx.setStorageSync('user',{name:'小明',age:18})  也可以直接存储对象且不用JSON....处理
}
})

读取数据


page({
 读取本地数据
 const name = wx.getStorageSync('name') 就可以拿到 本地存储名为name里面的值

 const obj = wx.getStorageSync('user') 就可以拿到 本地存储名为 user对象里面的数据
 
})

Delete the specified storage data ---wx.removeStorageSync('name')

Clear all storage data ---wx.clearStorageSync()

• In the applet, the API at the end of Sync refers to the synchronous execution. The synchronous API is more concise when used, but the disadvantage is that the synchronization will block the program execution, and the execution efficiency is worse than the asynchronous version.

--------------------------------------------------------------------------------------------------------------------------------

Built-in API - get avatar

1. The first step is to set a button button

2. The second step is to set the button attribute: the open-type value is chooseAvatar--<button open-type="chooseAvatar" />

3. The third step is to add the listener event chooseavatar event --<button bindchooseavatar="getAvatar"/>

Summary: The combined method is: <button open-type="chooseAvatar" bindchooseavatar="getAvatar">Get user avatar</button>

Event monitoring - you can get the address of the avatar in getAvatar, or store the avatar and other operations

// pages/06-getuseInfo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    src: ''
  },
  // 获取微信用户的头像
  getAvatar (res) {
    console.log(res)
    // 保存头像信息
    this.setData({
      src: res.detail.avatarUrl
    })
  }
})

--------------------------------------------------------------------------------------------------------------------------------

Built-in API - upload avatar

The avatar address obtained above is a temporary address and can only be used inside the applet. To achieve permanent storage, you need to upload this picture to your own server. File upload will use wx.uploadFile({} ) .

// pages/06-getuseInfo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    src: ''
  },
  // 获取微信用户的头像
  getAvatar (res) {
    console.log(res)
    // 保存头像信息
    this.setData({
      src: res.detail.avatarUrl
    })
    // 上传临时文件
    wx.uploadFile({
      url: 'http://ajax-api.itheima.net/api/file', 这里是上传的服务器地址
      filePath: res.detail.avatarUrl,  这里是头像地址
      name: 'avatar', 这里要和后端给的东西一致
      success: result => {  这里是上传成功后的的一些处理
        // 返回的数据在：result.data 中，是一个 json 格式的字符串
        const res = JSON.parse(result.data)
        console.log(res)
      }
    })
  }
})

--------------------------------------------------------------------------------------------------------------------------------

Built-in API - get nickname

1, the first step: set an input component, add the attribute type value to nickname-<input type="nickname">

2. The second step: listen to the input, blur, change and other events of the input component to obtain the value in the form

总结：<input type="nickname" bindchange="inputhandler"/>

--------------------------------------------------------------------------------------------------------------------------------

subcontract - basic usage

Note : Dividing a small program into several parts is called subpackage. Only when the pages in the subpackage are accessed, the small program will download the corresponding code package. TabBar pages can only be placed in the main package. The package is not completely unlimited on the size of the code: the size of all subpackages of the entire applet does not exceed 20M

Function : It can realize the automatic loading of the currently required part of the applet code, which can improve the loading speed of the applet in a certain program, and can also solve the limitation that the size of the applet code package cannot exceed 2M.

use :

Step 1: Go to any location in the app.json file (but within brackets) and write the following code

{
分包
"subPackages": [
      {
        "root": "subpack1", 分包对应的代码根目录，即分包的代码放在哪个文件夹中
        "name": "subpack1",  分包的名称，可以省略
        "pages": [  分包中所包含的页面路径
          "pages/001-sub/index"
        ]
      }
    ],
}

Step 2: Write the above code and press save to automatically generate subcontracts

Use subpackage:

If you use subpackage, you can jump in and use it

<navigator url="/subpack1/pages/07-sub/index">to07</navigator>

--------------------------------------------------------------------------------------------------------------------------------

subpackage - pre-download