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 {

          }
        }
      });