微信小程序常用组件

布满荆棘的人生 2022-12-08 12:51 181阅读 0赞

### 文章目录 ###

*  一、常用的组件地图之-map
 *  1.marker
 *   *  1.1 marker
     *  1.2 marker 上的气泡 callout
 *  2.control
 *  二、小程序的定位相关api
 *  三、获取设备的基本信息的api
 *   *  1、设置全局的变量 app.js
     *  2.获取设备信息 app.js
     *  3.地图页面获取全局的设备信息
 *  四、处理小程序中的html标签
 *   *  1.rich-text
     *  2.wxparse https://github.com/icindy/wxParse
 *  五、小程序中的模板语法
 *  六、小程序常用api之拍照
 *   *  1.预览图片
     *  2.拍照
 *  七、wx.showActionSheet

# 一、常用的组件地图之-map #

[https://developers.weixin.qq.com/miniprogram/dev/component/map.html][https_developers.weixin.qq.com_miniprogram_dev_component_map.html]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>longitude</td> 
   <td>number</td> 
   <td></td> 
   <td>是</td> 
   <td>中心经度</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>latitude</td> 
   <td>number</td> 
   <td></td> 
   <td>是</td> 
   <td>中心纬度</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>scale</td> 
   <td>number</td> 
   <td>16</td> 
   <td>否</td> 
   <td>缩放级别，取值范围为3-20</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>markers</td> 
   <td>Array.&lt;marker&gt;</td> 
   <td></td> 
   <td>否</td> 
   <td>标记点</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>covers</td> 
   <td>Array.&lt;cover&gt;</td> 
   <td></td> 
   <td>否</td> 
   <td><strong>即将移除，请使用 markers</strong></td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>polyline</td> 
   <td>Array.&lt;polyline&gt;</td> 
   <td></td> 
   <td>否</td> 
   <td>路线</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>circles</td> 
   <td>Array.&lt;circle&gt;</td> 
   <td></td> 
   <td>否</td> 
   <td>圆</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>Array.&lt;control&gt;</td> 
   <td></td> 
   <td>否</td> 
   <td>控件（即将废弃，建议使用 <a rel="nofollow">cover-view</a> 代替）</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>include-points</td> 
   <td>Array.&lt;point&gt;</td> 
   <td></td> 
   <td>否</td> 
   <td>缩放视野以包含所有给定的坐标点</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>show-location</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>显示带有方向的当前定位点</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>polygons</td> 
   <td>Array.&lt;polygon&gt;</td> 
   <td></td> 
   <td>否</td> 
   <td>多边形</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>subkey</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>个性化地图使用的key</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>layer-style</td> 
   <td>number</td> 
   <td>1</td> 
   <td>否</td> 
   <td>个性化地图配置的 style，不支持动态修改</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>rotate</td> 
   <td>number</td> 
   <td>0</td> 
   <td>否</td> 
   <td>旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角</td> 
   <td><a rel="nofollow">2.5.0</a></td> 
  </tr> 
  <tr> 
   <td>skew</td> 
   <td>number</td> 
   <td>0</td> 
   <td>否</td> 
   <td>倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角</td> 
   <td><a rel="nofollow">2.5.0</a></td> 
  </tr> 
  <tr> 
   <td>enable-3D</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>展示3D楼块(工具暂不支持）</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>show-compass</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>显示指南针</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>show-scale</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>显示比例尺，工具暂不支持</td> 
   <td><a rel="nofollow">2.8.0</a></td> 
  </tr> 
  <tr> 
   <td>enable-overlooking</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>开启俯视</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>enable-zoom</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>否</td> 
   <td>是否支持缩放</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>enable-scroll</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>否</td> 
   <td>是否支持拖动</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>enable-rotate</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否支持旋转</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>enable-satellite</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否开启卫星图</td> 
   <td><a rel="nofollow">2.7.0</a></td> 
  </tr> 
  <tr> 
   <td>enable-traffic</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否开启实时路况</td> 
   <td><a rel="nofollow">2.7.0</a></td> 
  </tr> 
  <tr> 
   <td>setting</td> 
   <td>object</td> 
   <td></td> 
   <td>否</td> 
   <td>配置项</td> 
   <td><a rel="nofollow">2.8.2</a></td> 
  </tr> 
  <tr> 
   <td>bindtap</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>点击地图时触发，<a rel="nofollow">2.9.0</a>起返回经纬度信息</td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>bindmarkertap</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>点击标记点时触发，<code>e.detail = {markerId}</code></td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>bindlabeltap</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>点击label时触发，<code>e.detail = {markerId}</code></td> 
   <td><a rel="nofollow">2.9.0</a></td> 
  </tr> 
  <tr> 
   <td>bindcontroltap</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>点击控件时触发，<code>e.detail = {controlId}</code></td> 
   <td><a rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td>bindcallouttap</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>点击标记点对应的气泡时触发<code>e.detail = {markerId}</code></td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>bindupdated</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>在地图渲染更新完成时触发</td> 
   <td><a rel="nofollow">1.6.0</a></td> 
  </tr> 
  <tr> 
   <td>bindregionchange</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>视野发生变化时触发，</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>bindpoitap</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>否</td> 
   <td>点击地图poi点时触发，<code>e.detail = {name, longitude, latitude}</code></td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
 </tbody> 
</table>

# 1.marker #

## 1.1 marker ##

标记点用于在地图上显示标记的位置

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>备注</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>标记点 id</td> 
   <td>number</td> 
   <td>否</td> 
   <td>marker 点击事件回调会返回此 id。<strong>建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。</strong></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>latitude</td> 
   <td>纬度</td> 
   <td>number</td> 
   <td>是</td> 
   <td>浮点数，范围 -90 ~ 90</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>longitude</td> 
   <td>经度</td> 
   <td>number</td> 
   <td>是</td> 
   <td>浮点数，范围 -180 ~ 180</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>标注点名</td> 
   <td>string</td> 
   <td>否</td> 
   <td>点击时显示，callout存在时将被忽略</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>zIndex</td> 
   <td>显示层级</td> 
   <td>number</td> 
   <td>否</td> 
   <td></td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>显示的图标</td> 
   <td>string</td> 
   <td>是</td> 
   <td>项目目录下的图片路径，支持网络路径、本地路径、代码包路径（<a rel="nofollow">2.3.0</a>）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>rotate</td> 
   <td>旋转角度</td> 
   <td>number</td> 
   <td>否</td> 
   <td>顺时针旋转的角度，范围 0 ~ 360，默认为 0</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>alpha</td> 
   <td>标注的透明度</td> 
   <td>number</td> 
   <td>否</td> 
   <td>默认 1，无透明，范围 0 ~ 1</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>标注图标宽度</td> 
   <td>number/string</td> 
   <td>否</td> 
   <td>默认为图片实际宽度</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>标注图标高度</td> 
   <td>number/string</td> 
   <td>否</td> 
   <td>默认为图片实际高度</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>callout</td> 
   <td>自定义标记点上方的气泡窗口</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>支持的属性见下表，可识别换行符。</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>为标记点旁边增加标签</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>支持的属性见下表，可识别换行符。</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>anchor</td> 
   <td>经纬度在标注图标的锚点，默认底边中点</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>aria-label</td> 
   <td>无障碍访问，（属性）元素的额外描述</td> 
   <td>string</td> 
   <td>否</td> 
   <td></td> 
   <td><a rel="nofollow">2.5.0</a></td> 
  </tr> 
 </tbody> 
</table>

## 1.2 marker 上的气泡 callout ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>content</td> 
   <td>文本</td> 
   <td>string</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>文本颜色</td> 
   <td>string</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>fontSize</td> 
   <td>文字大小</td> 
   <td>number</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>borderRadius</td> 
   <td>边框圆角</td> 
   <td>number</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>borderWidth</td> 
   <td>边框宽度</td> 
   <td>number</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td>边框颜色</td> 
   <td>string</td> 
   <td><a rel="nofollow">2.3.0</a></td> 
  </tr> 
  <tr> 
   <td>bgColor</td> 
   <td>背景色</td> 
   <td>string</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>文本边缘留白</td> 
   <td>number</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>display</td> 
   <td>'BYCLICK':点击显示; 'ALWAYS':常显</td> 
   <td>string</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
  <tr> 
   <td>textAlign</td> 
   <td>文本对齐方式。有效值: left, right, center</td> 
   <td>string</td> 
   <td><a rel="nofollow">1.6.0</a></td> 
  </tr> 
 </tbody> 
</table>

# 2.control #

在地图上显示控件，控件不随着地图移动

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>控件id</td> 
   <td>number</td> 
   <td>否</td> 
   <td>在控件点击事件回调会返回此id</td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>控件在地图的位置</td> 
   <td>object</td> 
   <td>是</td> 
   <td>控件相对地图位置</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>显示的图标</td> 
   <td>string</td> 
   <td>是</td> 
   <td>项目目录下的图片路径，支持本地路径、代码包路径</td> 
  </tr> 
  <tr> 
   <td>clickable</td> 
   <td>是否可点击</td> 
   <td>boolean</td> 
   <td>否</td> 
   <td>默认不可点击</td> 
  </tr> 
 </tbody> 
</table>

# 二、小程序的定位相关api #

[https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.stopLocationUpdate.html  
][https_developers.weixin.qq.com_miniprogram_dev_api_location_wx.stopLocationUpdate.html]

# 三、获取设备的基本信息的api #

[https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfoSync.html][https_developers.weixin.qq.com_miniprogram_dev_api_base_system_system-info_wx.getSystemInfoSync.html]

*  同步

try { 
        // 如果条件可以执行下去
        const res = wx.getSystemInfoSync()
        console.log(res)
    } catch () { 
        // 异常
    }

*  异步

wx.getSystemInfo({ 
        success: (res) => { }
     })

**因为设备的信息可能在多个地方使用，所以建议使用全局变量**

## 1、设置全局的变量 app.js ##

globalData: { 
        userInfo: null,
        deviceinfo: null
    },

## 2.获取设备信息 app.js ##

App({ 
        onLaunch () { 
            // 获取设备的信息
            this.getDeviceInfoFn()
            
        },
        getDeviceInfoFn () { 
            wx.getSystemInfo({ 
              success: (res) => { 
                console.log(res)
                // 修改全局数据
                this.globalData.deviceinfo = res
              }
            })
        }
    })

## 3.地图页面获取全局的设备信息 ##

// pages/map/map.js
    const app = getApp();
    console.log(app.globalData)
    // const { screenWidth, screenHeight } = app.globalData.deviceinfo
    const {  globalData: {  deviceinfo: {  screenWidth, screenHeight }}} = app

# 四、处理小程序中的html标签 #

## 1.rich-text ##

[http://ueditor.baidu.com/website/][http_ueditor.baidu.com_website]

[https://www.cnblogs.com/sky903700252/p/7846240.html][https_www.cnblogs.com_sky903700252_p_7846240.html]

## 2.wxparse https://github.com/icindy/wxParse ##

第一步下载wxParse，参考网盘链接  
链接：https://pan.baidu.com/s/1bMvyar60I1BAqzr5qxHZXw  
提取码：gv9w

第二步 复制文件夹wxParse至项目跟目录下

第三步 详情页面引入必要的文件

// pages/detail/detail.js
    var WxParse = require('../../wxParse/wxParse.js');

// pages/detail/detail.wxss
    @import "/wxParse/wxParse.wxss";

第四步 数据绑定

当数据请求成功之后，会得到一段HTML代码，形如

var detail = `<p style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; padding: 0px; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 24px;"><strong>指出</strong></span>，总理先生是人民的老朋友，在当前人民奋力抗击新冠肺炎疫情的关键时刻，先生提出同我通电话，
    体现了方对方的情谊和支持。疫情难免暂时影响正常人员往来，但动摇不了人民的深厚友谊。双方要在携手应对疫情挑战的同时，持续深化两国
    关系特别是共建“<span style="color: rgb(255, 0, 0); text-decoration: underline;">一带一路</span>”合作，创造更多合作成果，造福两国和两国人民。<
    /p><p style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; padding: 0px; color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 24px;"><strong>强调</strong></span>，疫情发生以来，政府高度重视，举全国之力，团结一心，采取最全面、最严格、最彻底的防控举措，取得积极成效，病亡率保持在较低水平，治疗方法不断突破，治愈率持续提升。中国政府将带领中国人民坚定信心、同舟共济、科学防治、精准施策，坚决打赢疫情防控阻击战。我们也
    一定能把疫情影响降到最低，保持中国经济发展势头，努力实现今年<span style="color: rgb(255, 0, 0);"><em>发展目标任务</em></span>，同时继续朝我们的长远目标坚定迈进。</p><p><br/></p>`

给wxparse赋值

/**
    * WxParse.wxParse(bindName , type, data, target,imagePadding)
    * 1.bindName绑定的数据名(必填)
    * 2.type可以为html或者md(必填)
    * 3.data为传入的具体数据(必填)
    * 4.target为Page对象,一般为this(必填)
    * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
    */
    WxParse.wxParse('article', 'html', data, this, 5);

模版引用 pages/detail/detail.wxml

js修改窗口  
[https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html  
][https_developers.weixin.qq.com_miniprogram_dev_api_ui_navigation-bar_wx.setNavigationBarTitle.html]

# 五、小程序中的模板语法 #

[https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html][https_developers.weixin.qq.com_miniprogram_dev_reference_wxml_template.html]

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板  
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

<template name="msgItem">
      <view>
        <text> {
       {index}}: {
       {msg}} </text>
        <text> Time: {
       {time}} </text>
      </view>
    </template>

使用模板  
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如

wxml
    <template is="msgItem" data="{ {...item}}"/>

// js
    Page({ 
      data: { 
        item: { 
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })

# 六、小程序常用api之拍照 #

## 1.预览图片 ##

[https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html][https_developers.weixin.qq.com_miniprogram_dev_api_media_image_wx.previewImage.html]

// pages/home/home.wxml
     <image lazy-load="{ {true}}" mode="widthFix" show-menu-by-longpress="{ {true}}" src="{ { 'http://daxun.kuboy.top' + item}}" data-index="index" bindtap="previewImage"></image>

// pages/home/home.js
    previewImage (event) { 
       let arr = []; // 预留空数组
       let index = event.currentTarget.dataset.index // 获取当前点击的图片的索引
       this.data.bannerlist.map(item => {  // 将处理的数据压入数组
        arr.push('http://daxun.kuboy.top' + item)
       })
       console.log(arr)
       wx.previewImage({  // 调用预览图片
         current: arr[index],
         urls: arr
       })
     }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center][]

## 2.拍照 ##

[https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html][https_developers.weixin.qq.com_miniprogram_dev_api_media_image_wx.chooseImage.html]

**wx.chooseImage(Object object)**

从本地相册选择图片或使用相机拍照

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>count</td> 
   <td>number</td> 
   <td>9</td> 
   <td>否</td> 
   <td>最多可以选择的图片张数</td> 
  </tr> 
  <tr> 
   <td>sizeType</td> 
   <td>Array.&lt;string&gt;</td> 
   <td>['original', 'compressed']</td> 
   <td>否</td> 
   <td>所选的图片的尺寸</td> 
  </tr> 
  <tr> 
   <td>sourceType</td> 
   <td>Array.&lt;string&gt;</td> 
   <td>['album', 'camera']</td> 
   <td>否</td> 
   <td>选择图片的来源</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**object.sizeType** 的合法值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>original</td> 
   <td>原图</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>compressed</td> 
   <td>压缩图</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**object.sourceType** 的合法值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>album</td> 
   <td>从相册选图</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>camera</td> 
   <td>使用相机</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**object.success** 回调函数

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tempFilePaths</td> 
   <td>Array.&lt;string&gt;</td> 
   <td>图片的本地临时文件路径列表 (本地路径)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>tempFiles</td> 
   <td>Array.&lt;Object&gt;</td> 
   <td>图片的本地临时文件列表</td> 
   <td><a rel="nofollow">1.2.0</a></td> 
  </tr> 
 </tbody> 
</table>

**res.tempFiles** 的结构

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>path</td> 
   <td>string</td> 
   <td>本地临时文件路径 (本地路径)</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>number</td> 
   <td>本地临时文件大小，单位 B</td> 
  </tr> 
 </tbody> 
</table>

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        img:""
      },
    
      //拍照
      chooseImg(){ 
        wx.chooseImage({ 
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success:(res)=>{ 
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths
            console.log(tempFilePaths)
            this.setData({ img:tempFilePaths})
          }
        })
      }
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center 1][]

# 七、wx.showActionSheet #

显示操作菜单

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>itemList</td> 
   <td>Array.&lt;string&gt;</td> 
   <td></td> 
   <td>是</td> 
   <td>按钮的文字数组，数组长度最大为 6</td> 
  </tr> 
  <tr> 
   <td>itemColor</td> 
   <td>string</td> 
   <td>#000000</td> 
   <td>否</td> 
   <td>按钮的文字颜色</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

// pages/user/user.wxml
    <button bindtap="showActionSheet">操作表</button>

// pages/user/user.js
    /** * 打开操作表 模拟真机的拍照 */
      showActionSheet () { 
        wx.showActionSheet({ 
          itemList: ['拍照', '从手机相册选取'],
          success(res) { 
            console.log(res.tapIndex)
            switch (res.tapIndex) { 
              case 0: 
                console.log('调用拍照')
                break;
              case 1:
                console.log('从手机相册选取')
                break;
              default: 
                console.log('选择了其中一个')
            }
          },
          fail () { 
            console.log('你点击去了取消按钮')
          }
        })
      }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center 2][]

[https_developers.weixin.qq.com_miniprogram_dev_component_map.html]: https://developers.weixin.qq.com/miniprogram/dev/component/map.html
[https_developers.weixin.qq.com_miniprogram_dev_api_location_wx.stopLocationUpdate.html]: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.stopLocationUpdate.html
[https_developers.weixin.qq.com_miniprogram_dev_api_base_system_system-info_wx.getSystemInfoSync.html]: https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfoSync.html
[http_ueditor.baidu.com_website]: http://ueditor.baidu.com/website/
[https_www.cnblogs.com_sky903700252_p_7846240.html]: https://www.cnblogs.com/sky903700252/p/7846240.html
[https_developers.weixin.qq.com_miniprogram_dev_api_ui_navigation-bar_wx.setNavigationBarTitle.html]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html
[https_developers.weixin.qq.com_miniprogram_dev_reference_wxml_template.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html
[https_developers.weixin.qq.com_miniprogram_dev_api_media_image_wx.previewImage.html]: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6e053ff93d7c48ddaae89bce68e6c35c.png
[https_developers.weixin.qq.com_miniprogram_dev_api_media_image_wx.chooseImage.html]: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/128cd9a3c4d14609a54c2080da32cb19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/90e0ba9950e74f19ae2df740a0c3c5c2.png