Create project
Open the WeChat developer tool and create a new project
Clean up all the useless content after creation
Introduce weui
In the past, it was introduced in the form of npm. After the introduction, it had to be built. It was more troublesome. The new version adds the function of direct import. Specifically, add configuration in app.json
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2",
"useExtendedLib": {
"weui": true
}
}
Just set weui to true. In order to verify whether the introduction is successful, we add a pop-up box on the index page.
First add custom components in index.json
{
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog"
}
}
Then introduce the required components in index.wxml
<!--index.wxml-->
<view class="container">
<text>这是一个云开发</text>
<mp-dialog title="test" show="{
{true}}" bindbuttontap="tapDialogButton" buttons="{
{[{text: '取消'}, {text: '确认'}]}}">
<view>test content</view>
</mp-dialog>
</view>
Is the effect after the introduction
very convenient? Some people like to use colorui and there are also useful ui frameworks. I personally prefer weui, the style is integrated with WeChat, and it is easy to use, don’t worry about incompatible effects.