1.10 設(shè)置

1、設(shè)置頁面

1.1 新建setting頁面

app.json
image.png

image.png

1.2 在tab選項(xiàng)卡中加入setting頁面

app.json
image.png
image.png

1.3 setting頁面的骨架

setting.wxml
<view class="container">
  <view class="category-item personal-info">
    <view class="user-avatar">
      <image src="{{userInfo.avatarUrl}}"></image>
    </view>
    <view class="user-name">
      <view class="user-nickname">
        <text>{{userInfo.nickName}}</text>
      </view>
      <view class="user-locaiton">
        <text>所在地：{{userInfo.city}}</text>
      </view>
    </view>
  </view>
  <view class="category-item">
    <block wx:for="{{cache}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>
  <view class="category-item">
    <block wx:for="{{device}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>
  <view class="category-item">
    <block wx:for="{{api}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>
  <view class="category-item">
    <block wx:for="{{others}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>

</view>

由于每個(gè)面板下的子項(xiàng)較多，且有可能經(jīng)常添加子項(xiàng)，因此沒有直接將子項(xiàng)硬編碼，而是采用了一種配置式的編寫方法。每個(gè)項(xiàng)目下的子項(xiàng)目?jī)?nèi)容都將在js文件中配置，然后通過數(shù)據(jù)綁定和列表渲染動(dòng)態(tài)的填充到wxml中

1.4 setting頁面的樣式

setting.wxss
.container {
    background-color: #efeff4;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.category-item {
    width: 100%;
    margin: 20rpx 0;
    border-top: 1rpx solid #d9d9d9;
    border-bottom: 1rpx solid #d9d9d9;
    background-color: #fff;
}
.category-item.personal-info {
    height: 130rpx;
    display: flex;
    padding: 20rpx 0;
}
.category-item.personal-info .user-avatar {
    margin: 0 30rpx;
    width: 130rpx;
    height: 130rpx;
    position: relative;
}
.category-item.personal-info .user-avatar image {
    vertical-align: top;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    border-radius: 2rpx;
}
.category-item.personal-info .user-name {
    margin-right: 30rpx;
    flex: 1;
    padding-top: 10rpx;
}
.detail-item{
    display: flex;
    margin-left: 30rpx;
    border-bottom: 1px solid RGBA(217, 217, 217, .4);
    height:85rpx;
    align-items: center;
}
.detail-item:last-child{
    border-bottom:none;
}
.detail-item image{
    height: 40rpx;
    width:40rpx;

}
.detail-item text{
    color:#7F8389;
    font-size:24rpx;
    flex:1;
    margin-left: 30rpx;
}
.detail-item .detail-item-btn{
    width: 50rpx;
    color: #d9d9d9;
    height: 40rpx;
    margin-right: 20rpx;
    text-align: center;
}
.detail-item .detail-item-btn::after{
    display: inline-block;
    content:'';
    width: 16rpx;
    height: 16rpx;
    color: #d9d9d9;
    margin-top: 8rpx;
    border:3rpx #d9d9d9 solid;
    border-top-color:transparent;
    border-left-color:transparent;
    transform: rotate(-45deg);
}

1.5 setting頁面的配置

setting.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    cache: [
      { iconurl: '/images/icon/wx_app_clear.png', title: '緩存清理', tap: 'clearCache' }
    ],
    device: [
      { iconurl: '/images/icon/wx_app_cellphone.png', title: '系統(tǒng)信息', tap: 'showSystemInfo' },
      { iconurl: '/images/icon/wx_app_network.png', title: '網(wǎng)絡(luò)狀態(tài)', tap: 'showNetWork' },
      { iconurl: '/images/icon/wx_app_location.png', title: '地圖顯示', tap: 'showMap' },
      { iconurl: '/images/icon/wx_app_compass.png', title: '指南針', tap: 'showCompass' },
      { iconurl: '/images/icon/wx_app_lonlat.png', title: '當(dāng)前位置、速度', tap: 'showLonLat' },
      { iconurl: '/images/icon/wx_app_shake.png', title: '搖一搖', tap: 'shake' },
      { iconurl: '/images/icon/wx_app_scan_code.png', title: '二維碼', tap: 'scanQRCode' }
    ],
    api: [
      { iconurl: '/images/icon/wx_app_list.png', title: '下載pdf、word文檔', tap: 'downloadDocumentList' },
      { iconurl: '', title: '用戶登陸', tap: 'login' },
      { iconurl: '', title: '校驗(yàn)用戶信息', tap: 'check' },
      { iconurl: '', title: '獲取用戶加密信息', tap: 'decrypted' },
      { iconurl: '', title: '模板消息', tap: 'tplMessage' },
      { iconurl: '', title: '微信支付', tap: 'wxPay' }
    ],
    others: [
      { iconurl: '', title: 'wx:key示例', tap: 'showWxKeyDemo' },
      { iconurl: '', title: 'scroll-view高級(jí)用法演示', tap: 'showScrollViewDemo' }
    ],
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})
image.png

1.6 setting頁面導(dǎo)航欄配置

setting.json
{
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "設(shè)置"
}
image.png

2、獲取用戶基本信息

2.1 新建g_userInfo全局變量

app.js
image.png

2.2 獲取用戶基本信息

image.png

因?yàn)樾〕绦駻PI的更新，需要用戶主動(dòng)觸發(fā)授權(quán)才可以獲取用戶的基本信息，因此將授權(quán)工作放在歡迎頁面的點(diǎn)擊按鈕上


image.png
welcome.js

var app = getApp();

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),//檢查有沒有使用權(quán)限
    loginCode:null
  },

  onGotUserInfo:function(){
    var that = this;
    wx.getSetting({
      success: function (res) {
        console.log("授權(quán)結(jié)果成功：" + res)
        if (res.authSetting['scope.userInfo']) {
          // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
          wx.getUserInfo({
            lang:"zh_CN",
            withCredentials: true,
            success: function (res) {
              app.globalData.g_userInfo = res.userInfo;
              // //將用戶的基本信息保存到緩存中
              wx.setStorageSync("user", res.userInfo);
              console.log("用戶基本信息獲取成功：" + res.userInfo)
            },
            fail: function (res) {
              console.log("用戶基本信息獲取失?。? + res)
            }
          })
        }
        that.jumpToPostPage();
      },
      fail: function () {
        console.log("授權(quán)結(jié)果失?。? + res)
      }
    })
    
  },

  getUserInfo: function () {
    var userInfoStorage = wx.getStorageSync("user");
    if (!userInfoStorage) {
      console.log("緩存中沒有用戶基本信息")
      //如果緩存中沒有用戶信息，那么獲取用戶信息
      var that = this;
      wx.login({
        success: function (res) {
          console.log("登錄成功：" + res.code);
          that.setData({
            loginCode: res.code
          })
        }
      })
    } else {
      //如果緩存中已經(jīng)有用戶信息，那么將用戶信息保存到全局變量中
      console.log("緩存中已經(jīng)有用戶基本信息")
      app.globalData.g_userInfo = userInfoStorage;
    }
  },

  //跳轉(zhuǎn)到post列表頁面
  jumpToPostPage:function(){
    wx.switchTab({

      url: '../post/post',

      success: function () {
        console.log("跳轉(zhuǎn)頁面成功")
      },

      fail: function () {
        console.log("跳轉(zhuǎn)頁面失敗")
      },

      complete: function () {
        console.log("跳轉(zhuǎn)頁面完成")
      },
    });
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    this.getUserInfo();
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
    console.log("歡迎頁面被隱藏")
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
    console.log("歡迎頁面被卸載")
  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
    
  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
image.png

2.3 獲取用戶信息并綁定

setting.js
image.png
image.png
image.png

3、數(shù)據(jù)緩存的異步操作

使用異步的清除緩存方法： wx.clearStorage

3.1 showModal公共方法

setting.js
//顯示模態(tài)窗口
  showModal:function(title,content,callback){
    wx.showModal({
      title: title,
      content: content,
      confirmColor:"#1F4BA5",
      cancelColor:"#7FB389",
      success:function(res){
        if (res.confirm){
          // callback;
          callback && callback();
        }
      }
    })
  },

  //緩存清理
  clearCache:function(){
    this.showModal("緩存清理","確定要清除本地緩存嗎？",function(){
      wx.clearStorage({
        success:function(msg){
          wx.showToast({
            title: '緩存清理成功',
            duration:1000,
            mask:true,
            icon:"success"
          })
        },
        fail:function(e){
          console.log(e)
        }
      });
    })
  }
image.png
image.png

4、獲取系統(tǒng)信息

4.1 新增device頁面

app.json
image.png

4.2 showDeviceInfo函數(shù)

setting.js
image.png

4.3 device子頁面的骨架

device.wxml
<view class="container">
  <view class="category-item personal-info">
    <view class="user-avatar">
      <image src="{{userInfo.avatarUrl}}"></image>
    </view>
    <view class="user-name">
      <view class="user-nickname">
        <text>{{userInfo.nickName}}</text>
      </view>
      <view class="user-locaiton">
        <text>所在地：{{userInfo.city}}</text>
      </view>
    </view>
  </view>
  <view class="category-item">
    <block wx:for="{{cache}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>
  <view class="category-item">
    <block wx:for="{{device}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>
  <view class="category-item">
    <block wx:for="{{api}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>
  <view class="category-item">
    <block wx:for="{{others}}">
      <view class="detail-item" catchtap="{{item.tap}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>

</view>

4.4 device子頁面的樣式

device.wxss
.container {
    background-color: #efeff4;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.category-item {
    width: 100%;
    margin: 20rpx 0;
    border-top: 1rpx solid #d9d9d9;
    border-bottom: 1rpx solid #d9d9d9;
    background-color: #fff;
}
.detail-item{
    display: flex;
    margin-left: 30rpx;
    border-bottom: 1px solid RGBA(217, 217, 217, .4);
    height:85rpx;
    align-items: center;
}
.detail-item:last-child{
    border-bottom:none;
}
.detail-item text{
    color:#7F8389;
    font-size:24rpx;
    flex:1;
}
.detail-item text:last-child{
    color:#7F8389;
    font-size:24rpx;
    flex:1;
    text-align: right;
    padding-right: 20rpx;
}

4.5 獲取系統(tǒng)信息

device.js
Page({
  data: {
    phoneInfo: [],
    softInfo: [],
    screenInfo: [],
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        that.setData({
          phoneInfo: [
            { key: "手機(jī)型號(hào)", val: res.model },
            { key: "手機(jī)語言", val: res.language }
          ],
          softInfo: [
            { key: "微信版本", val: res.version },
            { key: "操作系統(tǒng)版本", val: res.system },
            { key: "客戶端平臺(tái)", val: res.platform }
          ],
          screenInfo: [
            { key: "屏幕像素比", val: res.pixelRatio },
            { key: "屏幕尺寸", val: res.windowWidth + '×' + res.windowHeight }
          ]
        });
      }
    });

    wx.setNavigationBarTitle({
      title: '系統(tǒng)信息',
    })
  }
});
image.png

5、獲取網(wǎng)絡(luò)狀態(tài)

image.png
image.png

5.1 獲取網(wǎng)絡(luò)狀態(tài)信息

setting.js
image.png
image.png

6、獲取當(dāng)前位置信息和當(dāng)前速度信息

image.png

image.png

6.1 獲取當(dāng)前位置和速度信息

setting.js
  //獲取當(dāng)前位置經(jīng)緯度和當(dāng)前速度
  getLonLat:function(callback){
    var that = this;
    wx.getLocation({
      type: "gcj02",
      success: function(res) {
        callback(res.longitude,res.latitude,res.speed);
      },
    })
  },

6.2 顯示當(dāng)前位置和速度信息

setting.js
 showLonLat:function(){
    var that = this;
    this.getLonLat(function(lon,lat,speed){
      console.log("lon=========" + lon);
      console.log("lat=========" + lat);
      var lonStr = lon >= 0 ? '東經(jīng)' : '西經(jīng)',
        latStr = lat >= 0 ? '北緯' : '南緯';

        //保留2位小數(shù)
      lon = lon.toFixed(2);
      lat = lat.toFixed(2);
      console.log("lon.toFixed(2)=========" + lon);
      console.log("lat.toFixed(2)=========" + lat);
      lonStr += lon;
      latStr += lat;
      speed = (speed || 0).toFixed(2);
      that.showModal('當(dāng)前位置和速度', '當(dāng)前位置：' + lonStr + ',' + latStr + '。速度:' + speed + 'm/s');
    });
  }
image.png

image.png

7、使用微信內(nèi)置地圖查看位置信息

image.png
image.png

7.1 在地圖上顯示坐標(biāo)點(diǎn)

setting.js
//在地圖上顯示坐標(biāo)點(diǎn)
  showMap:function(){
    this.getLonLat(function(lon,lat){
      wx.openLocation({
        latitude: lat,
        longitude: lon,
        scale:15,
        name:"荔枝樓",
        address:"中山大道車陂路口高地大街76號(hào)高地大廈2樓",
        fail:function(){
          wx.showToast({
            title: '地圖打開失敗',
            duration:100,
            icon:"cancel"
          })
        }
      })
    });
  }
image.png

8、監(jiān)聽羅盤數(shù)據(jù)制作一個(gè)簡(jiǎn)易指南針

image.png

image.png

image.png

image.png

8.1 在地圖上顯示坐標(biāo)點(diǎn)

setting.wxml
image.png

8.2 初始化變量值

setting.js
image.png

8.3 顯示羅盤

setting.js

  //顯示羅盤
  showCompass:function(){
    var that = this;
    this.setData({
      compassHidden:false
    })
    wx.onCompassChange(function(res){
      if(!that.data.compassHidden){
        this.setData({
          compassVal:res.direction.toFixed(2)
        })
      }
    })
  },

8.4 隱藏羅盤

setting.js
 //隱藏羅盤
  hideCompass:function(){
    this.setData({
      compassHidden:true
    })
  }
image.png

9、在小程序中實(shí)現(xiàn)搖一搖

image.png

9.1 添加搖一搖計(jì)數(shù)面板

setting.wxml
image.png

9.2 添加shakeInfo和shakeData變量

setting.js
image.png

9.3 搖一搖具體實(shí)現(xiàn)

setting.js
 //搖一搖
  shake: function () {
    var that = this;
    //啟用搖一搖
    this.gravityModalConfirm(true);

    wx.onAccelerometerChange(function (res) {
      //搖一搖核心代碼，判斷手機(jī)晃動(dòng)幅度
      var x = res.x.toFixed(4),
        y = res.y.toFixed(4),
        z = res.z.toFixed(4);
      var flagX = that.getDelFlag(x, that.data.shakeData.x),
        flagY = that.getDelFlag(y, that.data.shakeData.y),
        flagZ = that.getDelFlag(z, that.data.shakeData.z);

      that.data.shakeData = {
        x: res.x.toFixed(4),
        y: res.y.toFixed(4),
        z: res.z.toFixed(4)
      };
      if (flagX && flagY || flagX && flagZ || flagY && flagZ) {
        // 如果搖一搖幅度足夠大，則認(rèn)為搖一搖成功
        if (that.data.shakeInfo.enabled) {
          that.data.shakeInfo.enabled = false;
          that.playShakeAudio();
        }
      }
    });
  },

9.4 開啟或關(guān)閉搖一搖

setting.js
//啟用或者停用搖一搖功能
  gravityModalConfirm: function (flag) {
    if (flag !== true) {
      flag = false;
    }
    var that = this;
    this.setData({
      shakeInfo: {
        gravityModalHidden: !that.data.shakeInfo.gravityModalHidden,
        num: 0,
        enabled: flag
      }
    })
  },

9.5 計(jì)算偏移量

setting.js
  //計(jì)算搖一搖的偏移量
  getDelFlag: function (val1, val2) {
    return (Math.abs(val1 - val2) >= 1);
  },

9.6 搖一搖成功后播放聲音

setting.js
 // 搖一搖成功后播放聲音并累加搖一搖次數(shù)
  playShakeAudio: function () {
    var that = this;
    wx.playBackgroundAudio({
      dataUrl: 'http://7xqnxu.com1.z0.glb.clouddn.com/wx_app_shake.mp3',
      title: '',
      coverImgUrl: ''
    });
    wx.onBackgroundAudioStop(function () {
      that.data.shakeInfo.num++;
      that.setData({
        shakeInfo: {
          num: that.data.shakeInfo.num,
          enabled: true,
          gravityModalHidden: false
        }
      });
    });
  },

10、掃碼

image.png

image.png

10.1實(shí)現(xiàn)掃碼功能

setting.js
 //實(shí)現(xiàn)掃碼功能
  scanQRCode:function(){
    var that = this;
    wx.scanCode({
      success:function(res){
        console.log(res);
        that.showModal("掃描二維碼/條形碼",res.result,false);
      },
      fail:function(res){
        that.showModal("掃描二維碼/條形碼", "掃描失敗，請(qǐng)重試！", false);
      }
    })
  }

11、獲取小程序頁面二維碼

1）HTTP類型為POST
2）接收的參數(shù)：path 、width(默認(rèn)430)
3）調(diào)用接口前要先獲取access_token
獲取方法：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

12、下載并預(yù)覽pdf、word等多種類型文檔

12.1 新增download頁面

app.json
image.png

12.2 跳轉(zhuǎn)到download頁面

setting.js
image.png

12.3 download頁面的骨架代碼

dowmload.wxml
<view class="container">
  <view class="file-type-head">
    <text>文件類型</text>
  </view>
  <view class="category-item">
    <block wx:for="{{fileTypeList}}">
      <view class="detail-item" catchtap="downloadFile" data-type="{{item.type}}">
        <image src="{{item.iconurl}}"></image>
        <text>{{item.title}}</text>
        <view class="detail-item-btn"></view>
      </view>
    </block>
  </view>
</view>

12.4 download頁面的樣式代碼

dowmload.wxss
.file-type-head {
  display: flex;
  align-items: center;
  height: 70rpx;
  width: 100%;
  text-indent: 30rpx;
}

.file-type-head text {
  font-size: 32rpx;
}

.category-item {
  margin-top: 0;
}

.container {
  background-color: #efeff4;
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.category-item {
  width: 100%;
  margin: 20rpx 0;
  border-top: 1rpx solid #d9d9d9;
  border-bottom: 1rpx solid #d9d9d9;
  background-color: #fff;
}

.category-item.personal-info {
  height: 130rpx;
  display: flex;
  padding: 20rpx 0;
}

.category-item.personal-info .user-avatar {
  margin: 0 30rpx;
  width: 130rpx;
  height: 130rpx;
  position: relative;
}

.category-item.personal-info .user-avatar image {
  vertical-align: top;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2rpx;
}

.category-item.personal-info .user-name {
  margin-right: 30rpx;
  flex: 1;
  padding-top: 10rpx;
}

.detail-item {
  display: flex;
  margin-left: 30rpx;
  border-bottom: 1px solid RGBA(217, 217, 217, 0.4);
  height: 85rpx;
  align-items: center;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item image {
  height: 40rpx;
  width: 40rpx;
}

.detail-item text {
  color: #7f8389;
  font-size: 24rpx;
  flex: 1;
  margin-left: 30rpx;
}

.detail-item .detail-item-btn {
  width: 50rpx;
  color: #d9d9d9;
  height: 40rpx;
  margin-right: 20rpx;
  /*background-color: red;*/
  text-align: center;
}

.detail-item .detail-item-btn::after {
  display: inline-block;
  content: '';
  width: 16rpx;
  height: 16rpx;
  color: #d9d9d9;
  margin-top: 8rpx;
  border: 3rpx #d9d9d9 solid;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
}

12.5 download頁面的樣式代碼

dowmload.js
image.png

12.6 下載并且預(yù)覽文檔

dowmload.js
downloadFile: function (event) {
    var type = event.currentTarget.dataset.type,
      url = 'https://coding.net/u/airbreak/p/wx_app_files/git/raw/master/top10.';
    switch (type) {
      case "pdf":
        url += 'pdf';
        break;
      case "word":
        url += 'docx';
        break;
      case "excel":
        url += 'xlsx';
        break;
      default:
        url += 'pptx';
        break;
    }
    wx.downloadFile({
      url: url,
      success: function (res) {
        var filePath = res.tempFilePath;
        console.log(filePath);
        wx.openDocument({
          filePath: filePath,
          success: function (res) {
            console.log('打開文檔成功')
          },
          fail: function (res) {
            console.log(res)
          }, complete: function (res) {
            console.log(res);
          }
        })
      },
      fail: function () {
        console.log('下載失敗');
      }
    })
  },
image.png

image.png
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom閱讀 3,214評(píng)論 0贊 3
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,213評(píng)論 3贊 119
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,828評(píng)論 1贊 45
  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵勝奧閱讀 5,177評(píng)論 0贊 1
  • 休杰克曼和狼叔說再見了！ 電影院里，九點(diǎn)四十場(chǎng)寥寥十幾個(gè)人。 電影的精彩程度，三顆星。 電影的感動(dòng)程度，三顆星。 ...
    宋西坡閱讀 758評(píng)論 2贊 3

友情鏈接更多精彩內(nèi)容