knowledge points
三方组件库的安装与使用 computed 的安装与使用
new code branch
We take masteras a benchmark, giteecreate a new code branch componenton and develop code on this branch. The command is as follows:
git pull // 拉取 component 分支
git checkout component // 切换到 component 分支进行开发
1. Mind UI Weapp component library
1. Introduction to the component library
The component library used in Mind UI Weappthis project is the native UIcomponent , which supports the npminstallation method.
- Component library source code:
https://github.com/NameLi/mind-ui-weapp - Component library documentation:
https://mind-ui-weapp.ixook.com
2. Installation of component library
-
Component library installation
npm i mind-ui-weapp -S* After the component library is built and installed, anode_modulesfolder . Click the Local Settings of WeChat Developer Tools , check the option to use npm modules , and then click Tools . After the build is complete, aminiprogram_npmdirectory . In this directory, you can view the built component library file package, and then you can import and use the component. -
Global registrations can be used globally by importing registrations under the object in the
app.jsonfile .usingComponentsGenerally, components with high frequency of use are registered globally.{"usingComponents": {"m-button": "mind-ui-weapp/button/index",}}* Page/component registration Register the component in thexxx.jsonfile (take thebuttoncomponent as an example)"usingComponents": {"m-button": "/mind-ui-weapp/button/index"}and use it in the template<m-button type="primary">按钮</m-button>* The border under the screenborder.wxssis built in the component library, and the style is based on the implementation of pseudo- class and . If the style in the template already uses a pseudo-class, please add a layer of elements to wrap it outside to prevent style conflicts from being overwritten. All components in *style override* are enabled , the external page style can directly override the internal style of the component, the component style namespace is , please avoid conflicts with the style name in the project. * When using component components , if you need to override the style, you need to enable itRetina1pxcss::before::aftertransform/* app.wxss 或 app.scss */@import "miniprogram_npm/mind-ui-weapp/assets/style/border.wxss";Mind UI WeappaddGlobalClass: truem-Mind UI WeappstyleIsolation: 'shared' -
The use of JS method components currently
JSsupportstoastmessagemodalthree types of components called. Although.jstheimportcomponent code can be introduced in the page or component file, I still strongly recommend toapp.jsimport and mount it on the global propertywx,app.jsonand register the component as a global component in , which can avoid the need to introduce when using, and introduce Paths require trouble using relative locations. When using in// app.jsimport Toast from 'mind-ui-weapp/toast/toast'import Message from 'mind-ui-weapp/message/message'import Modal from 'mind-ui-weapp/modal/modal'wx.$toast = Toast; wx.$message = Message;wx.$modal = Modal;any page or component, you need to write the corresponding component in the page template Note: If you use it in the component, you need to write the corresponding component in the page template that introduces the component, and writing in the component is invalid. ### 2. Pluginsjswx.$toast('simple toast');<m-toast id="toast" />miniprogram-computed
1. miniprogram-computedIntroduction
The plug-in is officially provided by the WeChat applet, and the official explanation is: the implementation of the extension of the applet custom component behavior, the calculation attribute computedand watchthe listener. When data or properties change, the computedfield and the watchlistener will be triggered. In layman's terms , it is similar computedto watchthe implementation of and of vue. vueThe difference with is computedthat it cannot be used thisin dataand the value in can be passed in through the computedparameter ; there iswatch no support for .Vuehandle
- Official source code:
https://github.com/wechat-miniprogram/computed
2. miniprogram-computedInstallation
npm i miniprogram-computed -S
After the installation is complete, you also need to use the developer tools npm 构建to use it.
3. miniprogram-computedUse of
const = require('miniprogram-computed').behavior; // 引入计算属性组件
Component({behaviors: [computedBehavior],// 注入 mixins...
})
To avoid introducing computedBehaviorevery time it is used, we can app.jsmount it on the wxobject in .
// app.js
const computedBehavior = require('miniprogram-computed').behavior;
wx.computedBehavior = computedBehavior;
use:
// 组件中
Component({behaviors: [wx.computedBehavior],// ...
})
// 页面中
Page({behaviors: [wx.computedBehavior],data: {a: 1,b: 1,},computed: {sum(data) {// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b;}},// ...
})
3. Git settings
The installed three-party package files do not need gitto be hosted, so .gitignorethe relevant files need to be ignored in :
# .gitignore 文件中新增以下文件名称
package-lock.json// 本地包管理文件
/node_modules// 三方包
/miniprogram_npm // npm 构建后的三方包
Submit native code online:
git add . // 将本地代码添加到缓存区
git commit -m "UI 组件库与 computed 组件的安装与使用"// 将缓存区代码添加到本地仓库
git pull // 拉取远程代码
git push // 将代码提交到远程仓库
Merge component branch code into master
git checkout master // 切换到主分支
git merge component // 将 copmponent 分支代码合并到当前分支
git push// 将合并后的代码提交到远程分支
At last
The above is the introduction of the three-party component library used in this project. More usage details will be reflected in the subsequent development code.
At last
A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).
Friends in need, you can click the card below to receive and share for free