望穿秋水盼富贵 發表於 2022-2-11 11:31:00

微信小程序开发常用功能

<h2 id="获取用户信息">获取用户信息</h2>
<p>调用 <code>wx.getUserProfile</code> 方法获取用户基本信息。页面产生点击事件（例如 <code>button</code> 上 <code>bindtap</code> 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 <code>userInfo</code></p>
<p>具体参数如下：</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">必填</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">lang</td>
<td style="text-align: left">string</td>
<td style="text-align: left">en</td>
<td style="text-align: left">否</td>
<td>显示用户信息的语言</td>
</tr>
<tr>
<td style="text-align: left">desc</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td>声明获取用户个人信息后的用途，不超过30个字符</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td>接口调用成功的回调函数</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td>接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td>接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p>示例代码</p>
<pre><code class="language-js">wx.getUserProfile({
    desc: '用于完善用户基本资料', // 声明获取用户个人信息后的用途，不超过30个字符
    success: (res) =&gt; {
      console.log(res.userInfo));
    }
})
</code></pre>
<p>获取到的返回值</p>
<pre><code class="language-js">{
"nickName": "秋梓", // 微信昵称
"gender": 0,
"language": "zh_CN",
"city": "",
"province": "",
"country": "",
"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/qrSYVbDbBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/132" // 头像
}
</code></pre>
<h2 id="获取手机号">获取手机号</h2>
<p><strong>目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。</strong></p>
<p>使用方法</p>
<p>需要将 button 组件 <code>open-type</code> 的值设置为 <code>getPhoneNumber</code>，当用户点击并同意之后，可以通过 <code>bindgetphonenumber</code> 事件回调获取到动态令牌<code>code</code>，然后把<code>code</code>传到开发者后台，并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口，消费<code>code</code>来换取用户手机号。每个<code>code</code>有效期为5分钟，且只能消费一次。</p>
<p>注：<code>getPhoneNumber</code> 返回的 <code>code</code> 与 <code>wx.login</code> 返回的 <code>code</code> 作用是不一样的，不能混用。</p>
<p>代码示例</p>
<pre><code class="language-html">&lt;button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"&gt;&lt;/button&gt;
</code></pre>
<pre><code class="language-js">Page({
getPhoneNumber (e) {
    console.log(e.detail.code)
}
})
</code></pre>
<p>返回参数说明</p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">code</td>
<td style="text-align: left">String</td>
<td style="text-align: left">动态令牌。可通过动态令牌换取用户手机号。使用方法详情 phonenumber.getPhoneNumber 接口</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<p>然后通过 code 换取用户手机号。 每个code只能使用一次，code的有效期为5min</p>
<p>调用如下接口</p>
<pre><code class="language-text">POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
</code></pre>
<p>请求参数</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">access_token / cloudbase_access_token</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td style="text-align: left">接口调用凭证</td>
</tr>
<tr>
<td style="text-align: left">code</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td style="text-align: left">手机号获取凭证</td>
</tr>
</tbody>
</table>
<p>返回的 JSON 数据包</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">errcode</td>
<td style="text-align: left">number</td>
<td style="text-align: left">错误码</td>
</tr>
<tr>
<td style="text-align: left">errmsg</td>
<td style="text-align: left">string</td>
<td style="text-align: left">错误提示信息</td>
</tr>
<tr>
<td style="text-align: left">phone_info</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">用户手机号信息</td>
</tr>
</tbody>
</table>
<p>返回结果示例</p>
<pre><code class="language-js">{
    "errcode":0,
    "errmsg":"ok",
    "phone_info": {
      "phoneNumber":"xxxxxx",
      "purePhoneNumber": "xxxxxx",
      "countryCode": 86,
      "watermark": {
            "timestamp": 1637744274,
            "appid": "xxxx"
      }
    }
}
</code></pre>
<h2 id="实现微信支付">实现微信支付</h2>
<p>唤起微信支付的核心方法调用 <code>wx.requestPayment</code> 方法，该方法具体参数如下</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">必填</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">timeStamp</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td>时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间</td>
</tr>
<tr>
<td style="text-align: left">nonceStr</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td>随机字符串，长度为32个字符以下</td>
</tr>
<tr>
<td style="text-align: left">package</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td>统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***</td>
</tr>
<tr>
<td style="text-align: left">signType</td>
<td style="text-align: left">string</td>
<td style="text-align: left"><code>MD5</code> 仅在 v2 版本接口适用</td>
<td style="text-align: left">否</td>
<td>签名算法，应与后台下单时的值一致</td>
</tr>
<tr>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
<td style="text-align: left"><code>HMAC-SHA256</code> 仅在 v2 版本接口适用</td>
<td style="text-align: left"></td>
<td></td>
</tr>
<tr>
<td style="text-align: left"></td>
<td style="text-align: left"></td>
<td style="text-align: left"><code>RSA</code> 仅在 v3 版本接口适用</td>
<td style="text-align: left"></td>
<td></td>
</tr>
<tr>
<td style="text-align: left">paySign</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td>签名，具体见微信支付文档</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td>接口调用成功的回调函数</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td>接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td>接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<pre><code class="language-js">/**
* 微信支付方法
* @param {string} oderId 订单id
* @param {string} total 订单金额
* @param {stromg} openId 登陆人openid
*/
function weixinPayFun(data) {
wx.showLoading({
    mask: true
})
const http = new Http()
return new Promise((resolve, reject) =&gt; {
    // 请求支付接口
    http.post(`${env.fayongApi}/app/shopping/order/pay`, data).then(res =&gt; {
      // 获取支付签名信息
      let payInfo = res.data
      // 调起微信支付
      wx.requestPayment({
      "timeStamp": payInfo.timeStamp + '',
      "nonceStr": payInfo.nonceStr,
      "package": payInfo.package,
      "signType": "RSA",
      "paySign": payInfo.paySign,
      "success": function (res) {
          console.log(res, 'success');
          // 支付成功
          resolve(res)
      },
      "fail": function (err) {
          // 支付失败
          reject(err)
      },
      "complete": function (res) {
          wx.hideLoading()
      }
      })
    })
})
}
</code></pre>
<h2 id="添加分享功能">添加分享功能</h2>
<p>在需要分享的分享的页面中添加 <code>onShareAppMessage</code> 事件函数，此事件处理函数需要 return 一个 Object，用于自定义转发内容，<strong>只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮</strong></p>
<p><code>onShareAppMessage</code> 方法具体参数如下</p>
<table>
<thead>
<tr>
<th style="text-align: left">字段</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">title</td>
<td style="text-align: left">转发标题</td>
<td style="text-align: left">当前小程序名称</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">path</td>
<td style="text-align: left">转发路径</td>
<td style="text-align: left">当前页面 path ，必须是以 / 开头的完整路径</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">imageUrl</td>
<td style="text-align: left">自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。</td>
<td style="text-align: left">使用默认截图</td>
<td style="text-align: left">1.5.0</td>
</tr>
<tr>
<td style="text-align: left">promise</td>
<td style="text-align: left">如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数</td>
<td style="text-align: left"></td>
<td style="text-align: left">2.12.0</td>
</tr>
</tbody>
</table>
<h3 id="静态分享">静态分享</h3>
<p>示例代码</p>
<pre><code class="language-js">Page({
    // 分享
    onShareAppMessage() {
      return {
            title: "乐福健康", // 分享标题
            path: "pages/newhome/index", // 分享地址路径
      }
    }
})
</code></pre>
<p>添加完成后点击右上角胶囊按钮会分享图标会亮起</p>
<p><img src="https://cdn.jsdelivr.net/gh/SongZX0106/pictures/images/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220211101117.png" alt="微信截图_20220211101117.png" loading="lazy"></p>
<p><img src="https://cdn.jsdelivr.net/gh/SongZX0106/pictures/images/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220211101242.png" alt="微信截图_20220211101242.png" loading="lazy"></p>
<h3 id="带参分享">带参分享</h3>
<p>上面的分享是不带参数的，我们可以直接在路径中动态添加参数，分享后用户点击时会触发 <code>onLoad</code> 函数获取路径中的参数值</p>
<pre><code class="language-js">// 分享
onShareAppMessage() {
    const that = this;
    return {
      title: that.data.goodInfo.goodName, // 动态获取商品名称
      path: "pages/component/orderparticulars/orderparticulars?id=" + that.data.productId, // 动态传递当前商品id
      imageUrl: that.data.background // 获取商品封面图
    }
}
</code></pre>
<p>动态获取分享图片和标题后我们每次分享时会出现不同内容</p>
<p><img src="https://cdn.jsdelivr.net/gh/SongZX0106/pictures/images/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220211102921.png" alt="微信截图_20220211102921.png" loading="lazy"></p>
<p><img src="https://cdn.jsdelivr.net/gh/SongZX0106/pictures/images/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220211103007.png" alt="微信截图_20220211103007.png" loading="lazy"></p>
<h3 id="全局分享">全局分享</h3>
<p>除此之外我们也可以添加全局分享功能</p>
<p>首先要在每个页面中添加 <code>onShareAppMessage</code> 函数，函数体内容可以为空，如果函数体内容为空，则会使用我们在 <code>app.js</code> 中定义的默认分享方法，如果该函数返回了一个 object 则使用我们自定义的分享功能</p>
<p>在需要被分享的页面添加如下代码</p>
<pre><code class="language-js">Page({
    /**
   * 用户点击右上角分享
   */
    onShareAppMessage: function () {
                // 函数体内容为空即可
    }
})
</code></pre>
<p>接着在 <code>app.js </code>中添加重写分享方法</p>
<pre><code class="language-js">//重写分享方法
overShare: function () {
    //间接实现全局设置分享内容
    wx.onAppRoute(function () {
      //获取加载的页面
      let pages = getCurrentPages(),
            //获取当前页面的对象
            view = pages,
            data;
      if (view) {
            data = view.data;
            // 判断是否需要重写分享方法
            if (!data.isOverShare) {
                data.isOverShare = true;
                view.onShareAppMessage = function () {
                  //重写分享配置
                  return {
                        title: '分享标题',
                        path: "/pages/index/index"&nbsp; &nbsp; //分享页面地址
                  };
                }
            }
      }
    })
},
</code></pre>
<p>然后在 <code>onLaunch</code> 函数中调用该方法</p>
<pre><code class="language-js">onLaunch() {
    this.overShare()
}
</code></pre>
<h3 id="分享按钮">分享按钮</h3>
<p>在开发中我们也会碰到点击分享按钮实现分享功能，实现代码如下</p>
<p>首先在 <code>html</code> 中添加 <code>button</code> 按钮。其中 <code>open-typ</code> 要等于 <code>share</code>,表示点击这个按钮注定触发分享函数</p>
<pre><code class="language-html">&lt;!-- 分享按钮 --&gt;
&lt;van-button type="primary" icon="share" round class="search" open-type="share" size="small"&gt;
    分享
&lt;/van-button&gt;
</code></pre>
<p>之后要确保我们在 <code>js</code> 中添加了 <code>onShareAppMessage</code> 函数</p>
<p>效果如下：</p>
<p><img src="https://cdn.jsdelivr.net/gh/SongZX0106/pictures/images/search.gif" alt="search.gif" loading="lazy"></p>
<h2 id="获取用户收货地址">获取用户收货地址</h2>
<p>获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。</p>
<pre><code class="language-js">wx.chooseAddress({
    success(res) {
      console.log(res.userName)
      console.log(res.postalCode)
      console.log(res.provinceName)
      console.log(res.cityName)
      console.log(res.countyName)
      console.log(res.detailInfo)
      console.log(res.nationalCode)
      console.log(res.telNumber)
    }
})
</code></pre>
<p>参数说明</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">userName</td>
<td style="text-align: left">string</td>
<td style="text-align: left">收货人姓名</td>
</tr>
<tr>
<td style="text-align: left">postalCode</td>
<td style="text-align: left">string</td>
<td style="text-align: left">邮编</td>
</tr>
<tr>
<td style="text-align: left">provinceName</td>
<td style="text-align: left">string</td>
<td style="text-align: left">国标收货地址第一级地址</td>
</tr>
<tr>
<td style="text-align: left">cityName</td>
<td style="text-align: left">string</td>
<td style="text-align: left">国标收货地址第二级地址</td>
</tr>
<tr>
<td style="text-align: left">countyName</td>
<td style="text-align: left">string</td>
<td style="text-align: left">国标收货地址第三级地址</td>
</tr>
<tr>
<td style="text-align: left">streetName</td>
<td style="text-align: left">string</td>
<td style="text-align: left">国标收货地址第四级地址</td>
</tr>
<tr>
<td style="text-align: left">detailInfo</td>
<td style="text-align: left">string</td>
<td style="text-align: left">详细收货地址信息（包括街道地址）</td>
</tr>
<tr>
<td style="text-align: left">detailInfoNew</td>
<td style="text-align: left">string</td>
<td style="text-align: left">新选择器详细收货地址信息</td>
</tr>
<tr>
<td style="text-align: left">nationalCode</td>
<td style="text-align: left">string</td>
<td style="text-align: left">收货地址国家码</td>
</tr>
<tr>
<td style="text-align: left">telNumber</td>
<td style="text-align: left">string</td>
<td style="text-align: left">收货人手机号码</td>
</tr>
<tr>
<td style="text-align: left">errMsg</td>
<td style="text-align: left">string</td>
<td style="text-align: left">错误信息</td>
</tr>
</tbody>
</table>
<h2 id="预览图片">预览图片</h2>
<p>调用方法：<code>wx.previewImage(Object object)</code></p>
<p>在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">urls</td>
<td style="text-align: left">Array.<string></string></td>
<td style="text-align: left"></td>
<td style="text-align: left">是</td>
<td style="text-align: left">需要预览的图片链接列表。2.2.3 起支持云文件ID。</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">showmenu</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">true</td>
<td style="text-align: left">否</td>
<td style="text-align: left">是否显示长按菜单。 支持识别的码：小程序码 仅小程序支持识别的码：微信个人码、微信群码、企业微信个人码、 企业微信群码与企业微信互通群码；</td>
<td style="text-align: left">2.13.0</td>
</tr>
<tr>
<td style="text-align: left">current</td>
<td style="text-align: left">string</td>
<td style="text-align: left">urls 的第一张</td>
<td style="text-align: left">否</td>
<td style="text-align: left">当前显示图片的链接</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">referrerPolicy</td>
<td style="text-align: left">string</td>
<td style="text-align: left">no-referrer</td>
<td style="text-align: left">否</td>
<td style="text-align: left"><code>origin</code>: 发送完整的referrer; <code>no-referrer</code>: 不发送。格式固定为 <code>https://servicewechat.com/{appid}/{version}/page-frame.html</code>，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；</td>
<td style="text-align: left">2.13.0</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用成功的回调函数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">function</td>
<td style="text-align: left"></td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
<p>示例代码</p>
<pre><code class="language-js">wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
</code></pre>
<h2 id="页面跳转">页面跳转</h2>
<h3 id="跳转普通页面">跳转普通页面</h3>
<pre><code class="language-js">wx.navigateTo({
    url: '',
})
</code></pre>
<p>保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层</p>
<h3 id="跳转tabbar-页面">跳转tabBar 页面</h3>
<p>跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</p>
<pre><code class="language-js">wx.switchTab({
url: '/index'
})
</code></pre>
<h2 id="自定义组件">自定义组件</h2>
<p>在小程序中的组件和普通页面的 <code>js</code> 结构有很大差异，结构如下</p>
<pre><code class="language-js">// pages/TestComponent/test.js
Component({
    /**
   * 组件的属性列表
   */
    properties: {
      userName:""
    },

    /**
   * 组件的初始数据
   */
    data: {

    },

    /**
   * 组件的方法列表
   */
    methods: {
      // 获取父组件传递过来的参数
      getPropName(){
            console.log(this.data.userName);
      }
    }
})
</code></pre>
<p>其中我们在 <code>properties</code> 对象中定义组件组件的属性列表</p>
<p>然后再组件中添加触发 <code>getPropName</code> 的方法</p>
<pre><code class="language-html">&lt;button bind:tap="getPropName"&gt;获取名称&lt;/button&gt;
</code></pre>
<p>在我们需要引入这个组件的页面去声明这个组件的名称和地址，找到后缀为 <code>json</code> 的文件，添加如下代码</p>
<pre><code class="language-json">{
"usingComponents": {
    "test-component":"../TestComponent/test"
}
}
</code></pre>
<p>之后我们在页面中像使用普通标签一样使用这个组件,并且给组件传递数据</p>
<pre><code class="language-html">&lt;test-component userName="张三"&gt;&lt;/test-component&gt;
</code></pre>
<p>传递数据后我们即可实现点击组件中的按钮获取父组件传递过来的值</p>
<h2 id="定义全局组件">定义全局组件</h2>
<p>我们定义完组件后想要在全局使用，我们可以将这个组件定义为全局组件</p>
<p>首先找到项目中的 <code>app.json</code> 文件，找到 <code>usingComponents</code> 添加组件地址</p>
<pre><code class="language-js">{
    ......省略其他代码
    "usingComponents": {
      "test-component":"./pages/TestComponent/test"
    }
}
</code></pre>
<p>声明完成后我们即可在全局像使用标签的方式使用该组件</p>
<h2 id="设置默认顶部导航栏样式">设置默认顶部导航栏样式</h2>
<p>在 <code>app.json</code> 中添加如下代码</p>
<pre><code class="language-json">{
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#22a381",
      "navigationBarTitleText": "乐福健康",
      "navigationBarTextStyle": "white"
    }
}
</code></pre>
<p>全部参数列表</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">navigationBarBackgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">#000000</td>
<td style="text-align: left">导航栏背景颜色，如 <code>#000000</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">navigationBarTextStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">white</td>
<td style="text-align: left">导航栏标题颜色，仅支持 <code>black</code> / <code>white</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">navigationBarTitleText</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">导航栏标题文字内容</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">navigationStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">default</td>
<td style="text-align: left">导航栏样式，仅支持以下值： <code>default</code> 默认样式 <code>custom</code> 自定义导航栏，只保留右上角胶囊按钮。</td>
<td style="text-align: left">iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持</td>
</tr>
<tr>
<td style="text-align: left">backgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">#ffffff</td>
<td style="text-align: left">窗口的背景色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">backgroundTextStyle</td>
<td style="text-align: left">string</td>
<td style="text-align: left">dark</td>
<td style="text-align: left">下拉 loading 的样式，仅支持 <code>dark</code> / <code>light</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">backgroundColorTop</td>
<td style="text-align: left">string</td>
<td style="text-align: left">#ffffff</td>
<td style="text-align: left">顶部窗口的背景色，仅 iOS 支持</td>
<td style="text-align: left">微信客户端 6.5.16</td>
</tr>
<tr>
<td style="text-align: left">backgroundColorBottom</td>
<td style="text-align: left">string</td>
<td style="text-align: left">#ffffff</td>
<td style="text-align: left">底部窗口的背景色，仅 iOS 支持</td>
<td style="text-align: left">微信客户端 6.5.16</td>
</tr>
<tr>
<td style="text-align: left">enablePullDownRefresh</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">onReachBottomDistance</td>
<td style="text-align: left">number</td>
<td style="text-align: left">50</td>
<td style="text-align: left">页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">pageOrientation</td>
<td style="text-align: left">string</td>
<td style="text-align: left">portrait</td>
<td style="text-align: left">屏幕旋转设置，支持 <code>auto</code> / <code>portrait</code> / <code>landscape</code> 详见 响应显示区域变化</td>
<td style="text-align: left">2.4.0 (auto) / 2.5.0 (landscape)</td>
</tr>
<tr>
<td style="text-align: left">disableScroll</td>
<td style="text-align: left">boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">设置为 <code>true</code> 则页面整体不能上下滚动。 只在页面配置中有效，无法在 <code>app.json</code> 中设置</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">usingComponents</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">页面自定义组件配置</td>
<td style="text-align: left">1.6.3</td>
</tr>
<tr>
<td style="text-align: left">initialRenderingCache</td>
<td style="text-align: left">string</td>
<td style="text-align: left"></td>
<td style="text-align: left">页面初始渲染缓存配置，支持 <code>static</code> / <code>dynamic</code></td>
<td style="text-align: left">2.11.1</td>
</tr>
<tr>
<td style="text-align: left">style</td>
<td style="text-align: left">string</td>
<td style="text-align: left">default</td>
<td style="text-align: left">启用新版的组件样式</td>
<td style="text-align: left">2.10.2</td>
</tr>
<tr>
<td style="text-align: left">singlePage</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left">单页模式相关配置</td>
<td style="text-align: left">2.12.0</td>
</tr>
<tr>
<td style="text-align: left">restartStrategy</td>
<td style="text-align: left">string</td>
<td style="text-align: left">homePage</td>
<td style="text-align: left">重新启动策略配置</td>
<td style="text-align: left">2.8.0</td>
</tr>
</tbody>
</table>
<p>效果</p>
<p><img src="https://cdn.jsdelivr.net/gh/SongZX0106/pictures/images/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220211112417.png" alt="微信截图_20220211112417.png" loading="lazy"></p>
<h2 id="取消顶部默认的导航栏">取消顶部默认的导航栏</h2>
<p>找到页面 <code>json</code> 文件添加 <code>"navigationStyle":"custom"</code>,即可去掉默认导航栏</p>
<pre><code class="language-json">{
"usingComponents": {
      
},
"navigationStyle":"custom"
}
</code></pre>
<p>添加自定义样式后可以达到如下效果</p>
<p><img src="https://cdn.jsdelivr.net/gh/SongZX0106/pictures/images/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220211112537.png" alt="微信截图_20220211112537.png" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/songzxblog/p/15882519.html
頁: [1]
查看完整版本: 微信小程序开发常用功能