创建项目
打开微信开发者工具,创建新的项目
创建完了之后将没有用的内容都清理干净
引入weui
以前引入得用npm的形式,引入完了还得进行构建,比较麻烦,新版本增加了直接导入的功能,具体在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 } }
设置weui为true就行,为了验证是否引入成功,我们在index页面增加一个弹出框。
先在index.json中增加自定义组件
{ "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } }
然后在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>
引入后的效果
是不是很方便呢,有的人喜欢用colorui也有用有赞的ui框架,我本人偏爱weui,样式和微信浑然一体,而且使用起来也方便不用担心会有不兼容的效果。