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

一，项目展示

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

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

二，细节

1.登录

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

<button open-type="getUserInfo" @getuserinfo="getUserInfo" @tap="getUserInfo1">
        <img src="../../../static/images/wechart1.png" class="icon_wechart"/>
        {{name}}
      </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 {

          }
        }
      });