Article directory
foreword
When we write a WeChat applet project, we need to do some basic configuration of the project, which can help us build the project more conveniently. This section will talk about where and how we should configure it.
1. Public style
Add the following files to the project.
Here common.wxssis our public style. You can import this file where you need it to give it the style set in it. For example, we added the style of the text tag here: We noticed that there are
still There is a file iconfont.wxss, here is the font icon, we may need to use these font icons in the project, how to generate the font icon file we need and use it?
We can generate it in Alibaba's vector icon library .
The steps are as follows:
1. Add to the shopping cart, open the shopping cart
2. Add all the icons we just added to the project (it can be a new one or an existing project)
3. Obtain the css file of the font icon
4. Paste the link in Open the browser and
we will see a css file, copy all the content in it, then open the WeChat applet project, and replace the copied content with the content iconfont.wxss. In this way, we get the font icon file.
5. The use of font icons
We introduce this file in app.wxss, and then we can use this file in the application:
@import "./styles/iconfont.wxss";
For example, we need to implement such a style in the page:
we can write this in the page.wxml file:
<view>
<text class="iconfont icon-shoucang"></text>
<view class="collect_text">收藏</view>
</view>
2. App global configuration
1、app.js
File location:
The file named app here is the global configuration file of the project, similar to the page file.
Let's look at the js file first
// app.js
App({
//1、应用第一次启动就会触发的事件 onLaunch
onLaunch() {
//应用第一次启动获取用户信息
},
//2、应用被用户看见
onShow(){
},
//3、应用被隐藏
onHide(){
},
//4、应用报错
onError(err){
//代码发生错误，收集用户错误信息，通过异步请求将错误信息、发送到后台
console.log(err)
},
//5、应用页面找不到：应用启动找不到入口页面才会触发（ 普通编译 切换 添加编译模式 启动一个不存在的页面可以触发）
onPageNotFound(){
//代码发生错误，收集用户错误信息，通过异步请求将错误信息、发送到后台
wx.navigateTo({
url: '/pages/demo06/demo06',
})
}
})
Seeing this file, we see that there are many functions, what do they represent?
They are the life cycle functions of the application, and the WeChat applet framework also has a life cycle, which is essentially a bunch of functions that will be executed in a specific period
In the applet, the life cycle is mainly divided into three parts :
1. Application life cycle
The life cycle function of the applet is called in app.js, and the App (Object) function is used to register a applet and specify its applet lifecycle callbacks.
2. Page life cycle
The page life cycle function is the life cycle function that will be called every time you enter/switch to a new page, and is also used to register a page through the App(Object) function.
3. Component life cycle
The life cycle of a component refers to some functions of the component itself. These functions are automatically triggered at a special point in time or when some special framework events are encountered, and the component is registered through Component (Object)
After knowing what is the life cycle function of the applet, we return to the global app.js file, what we need to do is:
1) Add printing information in onError, in order to print out the error message when the application fails ;
2) Add the default page to jump to when the application page cannot be found in onPageNotFound;
2、app.wxss
/* 引入字体图标 */
@import "./styles/iconfont.wxss";
/* 小程序不支持通配符 */
page,view,text,swiper,swiper-item,image,navigator{
padding:0;
margin:0;
box-sizing:border-box;
}
/* 主题颜色 通过变量来实现
*/
page{
/* 定义主题颜色 */
--themeColor:#eb4450;
/* 定义统一的字体大小
若page是375px大小 那么存在1px=2rpx
*/
font-size:28rpx;
}
image{
width: 100%;
}
This file is a global style file. What we need to do is:
1) System component styles
We know that system components will have some styles that may affect our layout, so we need to eliminate some unnecessary styles:
page,view,text,swiper,swiper-item,image,navigator{
padding:0;
margin:0;
box-sizing:border-box;
}
2) Global theme color and font configuration
page{
/* 定义主题颜色 */
--themeColor:#eb4450;
/* 定义统一的字体大小
若page是375px大小 那么存在1px=2rpx
*/
font-size:28rpx;
}
Here --themeColor is our custom style variable, wxcss supports the realization of style through variables, when we need to call this color variable, the code is as follows:
color:var(--themeColor)
3) Introduction of font icon style
@import "./styles/iconfont.wxss";
iconfont.wxss is a public style we created under the style file, here directly import this file through @import.
Note:
After the above global configuration, there is a problem that needs our attention, that is, when importing the required js file, we must @import it in each page to take effect in the page.
When importing the wxss file, we only need to import it once in app.wxss, and the page page can use the style file introduced by app.wxss without importing it again.
3. Project construction directory
We put the custom components under the file components:
when we make network requests, we need to encapsulate the network requests. These configurations are written in request-index.js. See the next section for specific configurations:
If there are no other catalogs, you can improve them by yourself.