uni-app.10.开发微信小程序的一些小操作

本是古典何须时尚 2022-10-11 06:17 476阅读 0赞

### 开发微信小程序的一些小操作 ###

*   *  退出小程序
     *   *  使用场景
         *  解决方案
         *   *  navigator
             *  具体使用
             *  参考资料
     *  隐藏主页按钮
     *   *  使用场景
         *  解决方案
         *   *  uni.hideHomeButton
             *  参考资料
     *  微信小程序分享
     *   *  解决方案
         *   *  showsharemenu
             *  全局实现分享
             *  参考资料

## 退出小程序 ##

### 使用场景 ###

在某些场景下需要操作小程序中的某一个界面，界面操作完成后直接退出小程序即可，不需要浏览小程序的其他界面。比如我们小程序中提供了一个微信扫码接单的功能：司机使用微信扫码进入到小程序的接单页面后，在页面中填入货物重量并且上传凭证后直接提交即可，不需要其他的操作，也不需要跳转到小程序的其他页面（这个主要考虑到火车司机群体的特殊性）。操作完之后直接退出小程序回到微信。

### 解决方案 ###

#### navigator ####

在uni-app的组件中，我们找到了[navigator][]，其有一个属性**open-type**，具体如下图

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

#### 具体使用 ####

uni-app也给我们具体的解决方案了，如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1]

我们希望的是在司机接单成功后直接退出，但是这个需要按钮触发，所以我们采取类似**曲线救国**的方针，先定义一个模态框，在司机接单成功后弹出模态框，点击模态框的按钮触发退出小程序的功能

<gui-modal ref="guimodal1" title="提示">
      <view slot="content" class="gui-padding gui-bg-gray">
        <text class="gui-block-text gui-text-center gui-text gui-color-gray" 
              style="line-height:100rpx; padding:10rpx;">货物出库成功！</text>
      </view>
      
      <view slot="btns" class="gui-flex gui-rows .gui-justify-content-end">
        <view class="modal-btns" style="margin-left:80rpx;">
          <navigator class="gui-color-red" open-type="exit" target="miniProgram" style="font-weight: bold;">我知道了</navigator>
        </view>
      </view>
    </gui-modal>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 2]

#### 参考资料 ####

[navigator][]

[uni-app中退出应用][uni-app]

## 隐藏主页按钮 ##

### 使用场景 ###

同样的也是上面的小程序案例，司机只需要接单而不关心其他操作。但是小程序中默认非主页左上角会有一个**HOME**按钮，考虑到货车司机群体的特殊性，为了不必要的麻烦，我们需要隐藏此按钮

### 解决方案 ###

#### uni.hideHomeButton ####

uni-app的api中为我们提供了uni.hideHomeButton，这个使用起来比较简单，在需要隐藏**HOME**键页面的`onShow`方法中直接执行该方法就可以了

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

onShow: () => {
    	uni.hideHomeButton();
    }

#### 参考资料 ####

[hidehomebutton][]

[uni-app开发的微信小程序如何隐藏返回首页按钮][uni-app 1]

## 微信小程序分享 ##

### 解决方案 ###

#### showsharemenu ####

对于uni-app开发的微信小程序的分享，官方的api也提供了showsharemenu，这个具体的使用方式分为两种：**全局实现分享**和**在单个页面实现分享**，对于这两种方式可以参考以下两篇文章

[全局实现分享][Link 1]

[在单个页面实现分享][Link 2]

#### 全局实现分享 ####

这里记录一下全局实现分享的代码，特别感谢[。思索][Link 3]提供的文章

1.  按照下图创建目录及文件
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 4]
2.  share.js
    
        export default { 
            created() { 
                //#ifdef MP-WEIXIN
                wx.showShareMenu({ 
                    withShareTicket: true,
                    menus: ['shareAppMessage', 'shareTimeline']
                });
                //#endif
            },
        }
3.  index.js
    
        import share from './src/share.js';
        export { share}
4.  main.js
    
        import { share} from './mixins/index.js'
        Vue.mixin(share)

上述步骤做完之后分享功能就已经OK了，我们运行小程序看下效果

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

#### 参考资料 ####

[uni.showShareMenu][]

[uni-app——微信小程序设置全局分享][Link 1]

[uniapp 微信小程序分享给微信好友与分享到朋友圈功能][Link 2]

[navigator]: https://uniapp.dcloud.io/component/navigator?id=navigator
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70]: /images/20221005/890dbf0945b6438f9aca76dbd77aed22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1]: /images/20221005/7c172f0246b445bda26488ea908a6f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 2]: /images/20221005/64c65fe1aa5e4a07aea6fb0389099a24.png
[uni-app]: https://ask.dcloud.net.cn/article/35125
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 3]: /images/20221005/991fb9442bde4ff0b215d2705e8973b3.png
[hidehomebutton]: https://uniapp.dcloud.io/api/ui/navigationbar?id=hidehomebutton
[uni-app 1]: https://ask.dcloud.net.cn/question/79907
[Link 1]: https://www.cnblogs.com/wangyang0210/p/14612806.html
[Link 2]: https://blog.csdn.net/yehaocheng520/article/details/107980226
[Link 3]: https://www.cnblogs.com/wangyang0210/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 4]: /images/20221005/0fbd1093adff4511aa46d9c075d47df9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 5]: /images/20221005/87aff7f8b89049a49758df3d982074a5.png
[uni.showShareMenu]: https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu