mpvue开发小程序（四）项目展示与细节

比眉伴天荒 2022-04-12 13:15 250阅读 0赞

一，项目展示

我开发的是一个教育平台（小程序版本），之前也是本人开发的一个vue+mintUI的移动端项目，现在用前面三章讲得那些基本框架就ok了，现在开看一下项目吧。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70][]

大致就是这样，前面还有一个登陆页。

二，细节

1.登录

之前的默认登录在未来微信官方会弃用，而替换成必须通过button按钮才能登录的形式。

// 点击事件
          getUserInfo1 () {
            // 判断小程序的API，回调，参数，组件等是否在当前版本可用。  为false 提醒用户升级微信版本
            if (wx.canIUse('button.open-type.getUserInfo')) {
              // 用户版本可用
            } else {
              wx.showToast({
                title: '请更新微信版本',
                duration: 2000
              })
            }
          },
          getUserInfo (e) {
            console.log(e);
            if (e.mp.detail.rawData) {
              // 用户按了允许授权按钮
              this.userInfo = e.mp.detail.userInfo;
              wx.setStorageSync('userInfo', this.userInfo);
              this.login();
              wx.switchTab({
                url: '../info/main'
              })
            } else {
              // 用户按了拒绝按钮
              console.log('用户按了拒绝按钮')
            }
          },

这样微信登录成功后去做你想要做的，如跳转。。等

2.select多选

小程序并不支持，而select单选可以用picker来代替，多选就只能用checkbox-group来替换了。

<checkbox-group @change="checkboxChange">
              <label class="weui-cell weui-check__label" v-for="item in majorOptions" :key="index">
                <checkbox class="weui-check" :value="item.value" :checked="item.checked" />
                <div class="weui-cell__hd weui-check__hd_in-checkbox">
                  <icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!item.checked"></icon>
                  <icon class="weui-icon-checkbox_success" type="success" size="23" v-if="item.checked"></icon>
                </div>
                <div class="weui-cell__bd">{
       {item.label}}</div>
              </label>
            </checkbox-group>

将这个checkbox-group放在div里，定位到某处，默认隐藏，点击显示。

3.弹窗

可以直接由小程序原生组件，还是很好用的

wx.showModal({
            title: '提示',
            content: '您确定要退出吗？',
            confirmText: "确定",
            cancelText: "取消",
            success: function (res) {
              console.log(res);
              if (res.confirm) {
                _that.close()
              } else {
    
              }
            }
          });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbjkzNzQ_size_16_color_FFFFFF_t_70]: /images/20220412/4823a263ed4444bab4630c98a3e09751.png