微信小程序的基础（一）

- 日理万妓 2023-02-27 08:26 115阅读 0赞

## 微信小程序介绍- [链接][Link 1]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70][] ##

微信小程序，简称**小程序**，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用

#### 1. 为什么是微信小程序? ####

1.  微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户。
2.  推广app 或公众号的成本太高。
3.  开发适配成本低。
4.  容易小规模试错，然后快速迭代。
5.  跨平台。

#### 2. 微信小程序历史 ####

*  2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫\*\*「微信小程序」\*\* 需要注意的是，之前是叫做 **应用号**
 *  2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案。
 *  2017年1月9日，微信推出的“小程序”正式上线。“小程序”是一种无需安装，即可使用的手机“应用”。不需要像往常一样下载App，用户在微信中“用完即走”。

#### 3. 疯狂的微信小程序 ####

1.  微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万
2.  信息传达数达到450亿
3.  小程序覆盖超过200+行业，交易额增长超过6倍，服务1000亿+人次,创造出了5000亿+的商业价值

#### 4. 还有其他的小程序 ####

1.  支付宝小程序22
2.  百度小程序
3.  QQ小程序
4.  今日头条 + 抖音小程序

#### 5.官方微信小程序体验 ####

[小程序示例源码][Link 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]

## 2准备 ##

#### 1. 注册账号 ####

*  建议使用全新的邮箱，没有注册过其他小程序或者公众号的。
 *  访问[注册页面][Link 3]，耐心完成注册即可。

#### 2. 获取APPID ####

*  由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的`APPID`，所以在注册成功后，可登录，然后获取APPID。
 *  [登录][Link 3]，成功后 `开发` => `开发设置` => `获取 AppID`

#### 3. 开发工具 ####

*  [下载地址][Link 4]
 *  微信小程序自带开发者工具，集 **开发** **预览** **调试** **发布** 于一身的 完整环境。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]

## 第一个微信小程序 ##

\#\#\#\#1. 打开微信开发者工具

*  注意 第一次登录的时候 需要扫码登录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 3]

#### 2. 新建小程序项目 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 4]

#### 3. 填写项目信息 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 5]

####  ####

## 微信开发者工具介绍 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 6]

## 小程序结构目录 ##

#### 1. 小程序文件结构和传统web对比 ####

<table> 
 <thead> 
  <tr> 
   <th>结构</th> 
   <th>传统web</th> 
   <th>微信小程序</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>结构</td> 
   <td>HTML</td> 
   <td>WXML</td> 
  </tr> 
  <tr> 
   <td>样式</td> 
   <td>CSS</td> 
   <td>WXSS</td> 
  </tr> 
  <tr> 
   <td>逻辑</td> 
   <td>Javascript</td> 
   <td>Javascript</td> 
  </tr> 
  <tr> 
   <td>配置</td> 
   <td>无</td> 
   <td>JSON</td> 
  </tr> 
 </tbody> 
</table>

*  通过以上对比得出，**传统web** 是三层结构。而微信小程序 是四层结构，多了一层 **配置.json**

\#\#\#\#2. 基本的项目目录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 7]

## 小程序配置文件 ##

*  一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 `app.json` 和 页面自己的 `page.json`
 *  注意：配置文件中不能出现注释

#### 1. 全局配置 app.json ####

*  [app.json配置][app.json]
 *  `app.json` 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

{ 
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{ 
        "navigationBarBackgroundColor": "#f00", 
        "navigationBarTextStyle" : "black",     
        "navigationBarTitleText": "小马哥",
        "navigationStyle" : "default",
        "backgroundColor" : "#0f0",
        "backgroundTextStyle" : "dark",
        "enablePullDownRefresh" : false,
        "backgroundColorTop" : "#00f", // 窗口顶部背景 真机调试 仅ios 
        "backgroundColorBottom" : "#f00", // 窗口底部背景 真机调试 仅ios 
        "pageOrientation": "auto"
      }
    }

**字段的含义**

1.  `pages`字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2.  `window`字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
3.  `tabBar`字段 – 详见底部 tab 栏

\#\#\#\#2. 页面配置 page.json

*  [page.json][]
 *  这里的 app.json 其实用来表示该小程序页面相关的配置
 *  页面的配置只能设置 app.json 中部分 window 配置项的内容, 页面中配置会覆盖 app.json 的 window 中相同的配置项

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色，如 <code>#000000</code></td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持 <code>black</code> / <code>white</code></td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td></td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>String</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 <code>dark</code> / <code>light</code></td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否全局开启下拉刷新。 详见 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onpulldownrefresh" rel="nofollow">Page.onPullDownRefresh</a></td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位为px。 详见 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onreachbottom" rel="nofollow">Page.onReachBottom</a></td> 
  </tr> 
  <tr> 
   <td>disableScroll</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>设置为 <code>true</code> 则页面整体不能上下滚动；只在页面配置中有效，无法在 <code>app.json</code> 中设置该项 (备:类似overflow:hidden)</td> 
  </tr> 
 </tbody> 
</table>

> 学小程序
> 
>  *  组件
>  *  api

## 常见组件 ##

重点讲解小程序中常用的布局组件

`view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox。`等

#### 1. view ####

*  视图容器 - 相当于之前的 div
 *  属性 :
    
     *  hover-class 指定按下去的样式类

<view hover-class="h-class">
      点击我试试
    </view>

#### 2. text ####

*  文本标签 - 相当于之前 span
 *  **特殊用法** :
    
     *  长按文字可以复制 (只有该标签有这个功能)
        
         *  设置true 才可以选择, 手机预览测试效果
     *  可以对空格 回车 进行编码

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>selectable</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>文本是否可选</td> 
  </tr> 
  <tr> 
   <td>decode</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否解码</td> 
  </tr> 
 </tbody> 
</table>

*  代码

//1.1 不可以选择
    <text>测试选择</text>
    //1.2 可以选择 (手机测试)
    <text selectable='{ { true }}'>测试选择</text>
    
    //2.1 显示空格失败 : 结果 => 姓 名
    <text>姓 名</text>
    //2.2 显示空格成功 : 结果 => 姓 名
    <text decode'>姓 名</text>
    
    //3 其他几个格式 -- 看图
    <text decode>正 正@</text>
    <text decode>正 正</text>
    <text decode>正 正</text>

*  使用场景

![在这里插入图片描述][20200716202947985.png]

#### 3. icon ####

*  图标组件

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>string</td> 
   <td></td> 
   <td>是</td> 
   <td>icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>number/string</td> 
   <td>23</td> 
   <td>否</td> 
   <td>icon的大小</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>icon的颜色，同css的color</td> 
  </tr> 
 </tbody> 
</table>

*  代码

#### 4. radio ####

*  单选框

![在这里插入图片描述][20200716203000984.png]

*  需要 搭配 `radio-group` 一起使用

<radio-group > 
      <radio>男</radio>
      <radio>女</radio>
    </radio-group>

#### 5. checkbox ####

*  多选框  
    ![在这里插入图片描述][20200716203012312.png]
 *  需要 搭配 `checkbox-group` 一起使用

<checkbox-group>
      <checkbox>前端</checkbox>
      <checkbox>java</checkbox>
    </checkbox-group>

#### 6. image ####

*  图标标签
    
     *  image 组件默认宽高 320\*240
 *  属性

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>String</td> 
   <td></td> 
   <td>图片资源地址</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>‘scaleToFill’</td> 
   <td>图片裁剪、缩放的模式</td> 
  </tr> 
  <tr> 
   <td>lazy-load</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>图片懒加载</td> 
  </tr> 
 </tbody> 
</table>

**mode 有效值：**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left"></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">scaleToFill</td> 
   <td align="left">缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">aspectFit</td> 
   <td align="left">缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">aspectFill</td> 
   <td align="left">缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**使用场景**

*  scaleToFill : 盒子尺寸和图片尺寸大小一样, 使用该模式
 *  aspectFit : 详情页顶部显示图片 (右)
 *  aspectFill : 列表item 使用该模式 (左)

//链接
    <view>
      <image mode="aspectFit"  src="http://img2.imgtn.bdimg.com/it/u=1668465722,3535501153&fm=214&gp=0.jpg"></image>
    </view>
    <view>
      <image mode="aspectFit"  src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1018718673,2637294948&fm=26&gp=0.jpg"></image>
    </view>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 8]

#### 7. swiper ####

*  轮播图组件
 *  默认宽度 100% 高度 150px

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indicator-dots</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示面板指示点</td> 
  </tr> 
  <tr> 
   <td>indicator-color</td> 
   <td>Color</td> 
   <td>rgba(0, 0, 0, .3)</td> 
   <td>指示点颜色</td> 
  </tr> 
  <tr> 
   <td>indicator-active-color</td> 
   <td>Color</td> 
   <td>#000000</td> 
   <td>当前选中的指示点颜色</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否自动播放</td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>Number</td> 
   <td>5000</td> 
   <td>自动切换时间间隔</td> 
  </tr> 
  <tr> 
   <td>circular</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否循环轮播</td> 
  </tr> 
 </tbody> 
</table>

*  **swiper**
    
     *  滑块视图容器
 *  **swiper-item**
    
     *  滑块
 *  打开淘宝使用 : `m.taobao.com`

#### 8. navigator ####

*  导航组件 类似超链接标签

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>target</td> 
   <td>String</td> 
   <td>self</td> 
   <td>在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>String</td> 
   <td></td> 
   <td>当前小程序内的跳转链接</td> 
  </tr> 
  <tr> 
   <td>open-type</td> 
   <td>String</td> 
   <td>navigate</td> 
   <td>跳转方式</td> 
  </tr> 
 </tbody> 
</table>

**open-type 有效值：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigate</td> 
   <td>保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面</td> 
  </tr> 
  <tr> 
   <td>redirect</td> 
   <td>关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。</td> 
  </tr> 
  <tr> 
   <td>switchTab</td> 
   <td>跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</td> 
  </tr> 
  <tr> 
   <td>reLaunch</td> 
   <td>关闭所有页面，打开到应用内的某个页面</td> 
  </tr> 
  <tr> 
   <td>navigateBack</td> 
   <td>关闭当前页面，返回上一页面或多级页面。可通过 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html#getcurrentpages" rel="nofollow">getCurrentPages()</a> 获取当前的页面栈，决定需要返回几层</td> 
  </tr> 
  <tr> 
   <td>exit</td> 
   <td>退出小程序，target="miniProgram"时生效</td> 
  </tr> 
 </tbody> 
</table>

#### 9. rich-text ####

*  富文本标签
    
     *  可以将html字符串解析成 对应标签，类似 vue中 `v-html`功能
 *  通过nodes属性来实现
    
    1.  接收标签字符串
    2.  接收对象数组

**nodes属性**

`nodes`属性支持 `字符串` 和 `标签节点数组`

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>标签名</td> 
   <td>string</td> 
   <td>是</td> 
   <td>支持部分受信任的 HTML 节点</td> 
  </tr> 
  <tr> 
   <td>attrs</td> 
   <td>属性</td> 
   <td>object</td> 
   <td>否</td> 
   <td>支持部分受信任的属性，遵循 Pascal 命名法</td> 
  </tr> 
  <tr> 
   <td>children</td> 
   <td>子节点列表</td> 
   <td>array</td> 
   <td>否</td> 
   <td>结构和 nodes 一致</td> 
  </tr> 
 </tbody> 
</table>

**文本节点：type = 'text’**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>文本</td> 
   <td>string</td> 
   <td>是</td> 
   <td>支持entities</td> 
  </tr> 
 </tbody> 
</table>

*  代码

// 标签字符串
        str :'<div style="color:red;" >呵呵</div>',
        // 对象数组
        str1 : [
          { 
            name:'div',
            attrs:{ 
              style:"color:red;"
            },
            children : [{ 
              type:'text',
              text:'哈哈'
            }]
          }
        ]
    
    // 使用
    <rich-text nodes='{ { str1 }}'></rich-text>

#### 10. button ####

![在这里插入图片描述][20200716203049397.png]

<button type="default" size="{ {defaultSize}}" loading="{ {loading}}" plain="{ {plain}}" >
      default
    </button>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>size</td> 
   <td>string</td> 
   <td>default</td> 
   <td>否</td> 
   <td>按钮的大小</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>string</td> 
   <td>default</td> 
   <td>否</td> 
   <td>按钮的样式类型</td> 
  </tr> 
  <tr> 
   <td>plain</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>按钮是否镂空，背景色透明</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>名称前是否带 loading 图标</td> 
  </tr> 
  <tr> 
   <td>form-type</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>用于form组件，点击分别会触发 form 组件的 submit/reset 事件</td> 
  </tr> 
  <tr> 
   <td>open-type</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>微信开放能力</td> 
  </tr> 
 </tbody> 
</table>

**size 的合法值**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>默认大小</td> 
  </tr> 
  <tr> 
   <td>mini</td> 
   <td>小尺寸</td> 
  </tr> 
 </tbody> 
</table>

**type 的合法值**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>primary</td> 
   <td>绿色</td> 
  </tr> 
  <tr> 
   <td>default</td> 
   <td>白色</td> 
  </tr> 
  <tr> 
   <td>warn</td> 
   <td>红色</td> 
  </tr> 
 </tbody> 
</table>

**form-type 的合法值**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>submit</td> 
   <td>提交表单</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>重置表单</td> 
  </tr> 
 </tbody> 
</table>

**open-type 的合法值**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>contact</td> 
   <td>打开客服会话，需要在微信小程序的后台配置 (演示不了)</td> 
  </tr> 
  <tr> 
   <td>share</td> 
   <td>触发用户转发，</td> 
  </tr> 
  <tr> 
   <td>getPhoneNumber</td> 
   <td>获取用户手机号，不是企业的小程序账号 没有权限来获取用户的手机号码 (演示不了)</td> 
  </tr> 
  <tr> 
   <td>getUserInfo</td> 
   <td>获取用户信息，可以从bindgetuserinfo回调中获取到用户信息</td> 
  </tr> 
  <tr> 
   <td>launchApp</td> 
   <td>打开APP 需要配合原生app (演示不了)</td> 
  </tr> 
  <tr> 
   <td>openSetting</td> 
   <td>打开授权设置页</td> 
  </tr> 
  <tr> 
   <td>feedback</td> 
   <td>打开“意见反馈”页面，需要真机调试</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://developers.weixin.qq.com/miniprogram/introduction/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: /images/20230209/05b4394a83fb485ab643700ac0e76d34.png
[Link 2]: https://github.com/wechat-miniprogram/miniprogram-demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]: /images/20230209/72d56a0718be4ade8f89d7277628dba5.png
[Link 3]: https://mp.weixin.qq.com/
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200716202734745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200716202807808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200716202825136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200716202836606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200716202846921.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200716202859264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[app.json]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[page.json]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
[20200716202947985.png]: https://img-blog.csdnimg.cn/20200716202947985.png
[20200716203000984.png]: https://img-blog.csdnimg.cn/20200716203000984.png
[20200716203012312.png]: https://img-blog.csdnimg.cn/20200716203012312.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200716203027606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg==,size_16,color_FFFFFF,t_70
[20200716203049397.png]: https://img-blog.csdnimg.cn/20200716203049397.png