微信小程序实战开发一：在小程序中使用useExtendedLib方法引入官方UI
微信小程序实战开发一：在小程序中使用useExtendedLib方法引入官方UI
之前直接使用官方代码中的CSS来制作界面，后来又发现了一种方法，使用 useExtendedLib 引入官方UI库。
使用方法很简单：
第一步、在全局json文件中引用代码
"useExtendedLib": {
"weui": true
}整体app.json代码如下：
{
"pages": [
"index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"useExtendedLib": {
"weui": true
}
}这样就定义了开启使用weui了。
然后在你需要引用的页面的json文件中使用代码：
{
"usingComponents": {
"mp-cells": "weui-miniprogram/cells/cells",
"mp-cell": "weui-miniprogram/cell/cell",
"mp-icon": "weui-miniprogram/icon/icon"
}
}这段的意思就是表明你想要使用的UI组件都有哪些。
在 WXML中直接使用组件的方式使用即可。代码如下：
<mp-icon icon='star'></mp-icon>
<mp-icon icon='home'></mp-icon>
<mp-cell title="单行列表" link>
<view slot="footer">
<view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
<mp-badge style="margin-left: 5px;margin-right: 5px;" ext-class="blue"/>
</view>
</mp-cell>总结：想要用这种方式使用WEUI需要先在全局变量中声明一下，然后需要在使用的页面JSON文件中定义你想使用哪个组件，然后通过组件调用的方式来调用即可。
至于哪些可以直接用，怎么用，需要挨个去试验一下。
官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/badge.html
下面按照官方的文档挨个试一下吧：
一 、基础组件
1、 Badge徽章
从第一个案例可以看到 我们调用的方法和官方给的还不太一样：
官方代码
{
"usingComponents": {
"mp-cells": "../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-badge": "../components/badge/badge"
}}我们自已写的
{
"usingComponents": {
"mp-cells": "weui-miniprogram/cells/cells",
"mp-cell": "weui-miniprogram/cell/cell",
"mp-badge": "weui-miniprogram/badge/badge"
}
}通过对比我们可以看出 官方使用的是 ../components 加组件地址 我们用的是 weui-miniprogram 加组件地址，可能是引用的方式不一样导致的差异。我们本地就没有components这个组件库。虽然方法不一样，但是还是可以使用的。效果如下（和官方提供的效果一样）：
即然可以用，我们就稍微了解一下这个效果的原理吧，只要挨个把代码读明白了，对着效果图一比较就很明了了。
<mp-cells title="新消息提示跟摘要信息后，统一在列表右侧"> //这句是引用组件cells 还用了一个title传值。测试到cells的时候可以研究一下
<mp-cell title="单行列表" link>//引用 cell组件 使用title传值 这个link等测试到cell的时候也需要看一下
<view slot="footer">//组件自定义的传值方式slot
<view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
<mp-badge style="margin-left: 5px;margin-right: 5px;" ext-class="blue"/>//使用 badge组件
</view>
</mp-cell>
</mp-cells>
<mp-cells title="未读数红点跟在主题信息后，统一在列表左侧">
<mp-cell>
<view slot="title" style="position: relative;margin-right: 10px;">
<image src="http://www.zjkdh.com/favicon.ico" style="width: 50px; height: 50px; display: block"/>
<mp-badge content="99+" style="position: absolute;top: -.4em;right: -.4em;"/>
</view>
<view>联系人名称</view>
<view style="font-size: 13px;color: #888888;">摘要信息</view>
</mp-cell>
<mp-cell link>
<view style="display: inline-block; vertical-align: middle">单行列表</view>
<mp-badge content="8" style="margin-left: 5px;"/>
</mp-cell>
<mp-cell link>
<view style="display: inline-block; vertical-align: middle">单行列表</view>
<mp-badge style="margin-left: 5px;" content="New"/>
</mp-cell>
</mp-cells>2、Gallery画廊
官方代码：
{
"usingComponents": {
"mp-gallery": "../components/gallery/gallery"
}}它这个上来就展示了，为了更符合操作需求，我把它改了一下：
<view bindtap="imgList" wx:for="{{imgUrls}}" data-itemid="{{idx}}" wx:key="id" wx:for-index="idx" wx:for-item="src">
<view >{{idx}}<image style="width: 100px; height: 100px; background-color: #eeeeee;" src="{{src}}"></image></view>
</view>
<mp-gallery show="{{show}}" showDelete="{{false}}" bindchange="change" binddelete="delete" bindhide="hide" img-urls="{{imgUrls}}" hide-on-click="{{true}}" current="{{current}}"><cover-view class="gallery-cover-view">点击隐藏</cover-view></mp-gallery>这样，先把图片循环展示出来，然后根据点击哪张图 就先把哪张图放大。。
imgList:function(e){
//console.log(e);
//console.log(e.currentTarget.dataset.itemid);
//执行放大过程
this.setData({
show: true,
current:e.currentTarget.dataset.itemid
})这样就符合基本使用需求了，但这个还有需要改进的地方，需要专开一贴详细说明。
示例就先放这两个吧。。其它有需要的话会单开贴子详细说明。