微信小程序開發(fā)常用功能點與使用方法總結

更新時間：2021年10月14日 15:14:29 作者：青煙小生

最近收集了一些小程序開發(fā)中常用到的知識點,記錄一下,所以下面這篇文章主要給大家介紹了關于微信小程序開發(fā)常用功能點與使用方法的相關資料,需要的朋友可以參考下

在這里，我主要整理了一些小程序開發(fā)過程中常用的功能點，非常實用，下面來一看看看吧

1、獲取高度寬度

var windowHeight = wx.getSystemInfoSync().windowHeight
var windowWidth = wx.getSystemInfoSync().windowWidth

2、動態(tài)綁定 style 樣式和class

class="operBtn {{select==1?'activeClass':''}}"
style="display:{{displayPhoto}}"

3、wx:if

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

4、點擊事件

<van-tag plain style="margin-left:10px;" bindtap="toggle">全選</van-tag>
//冒泡事件catchtap做點擊事件
 <van-button class="shop-but" size="mini" icon="like-o" catchtap="getWish" data-pro_id='{{item.product_id}}'></van-button>

//獲取點擊數據
let id = e.currentTarget.dataset.id

5、wx:for

//在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
//默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//或者
//使用 wx:for-item 可以指定數組當前元素的變量名，
//使用 wx:for-index 可以指定數組當前下標的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

6、data里面的數據

//存儲
this.setData({
        result: event.detail
      });
 //使用
 this.data.result

7、修改頁面配置。可以下拉刷新；修改頁面標題

"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#FFA500",
"navigationBarTitleText": "我的發(fā)票",
"navigationBarTextStyle": "white"

8、動態(tài)修改頁面標題

wx.setNavigationBarTitle({
     title: this.data.info.name
})

9.橫線

<van-divider custom-style="margin:10px 0;" />

10、WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

//時間格式化
<wxs module="format">
    var format = function(date) {
        var date = getDate(date)
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var weekDay = date.getDay()
        var week = ''
        switch(weekDay){ 
            case 0: 
                week = '周日'
                break; 
            case 1:
                week = '周一'
                break; 
            case 2: 
                week = '周二'
                break; 
            case 3: 
                week = '周三'
                break; 
            case 4: 
                week = '周四'
                break; 
            case 5: 
                week = '周五'
                break; 
            case 6: 
                week = '周六'
                break; 
        }
        return month + '月' + day + '日' +' ' + week;
    }
module.exports.format = format;
</wxs>


//手機郵箱打星號
<wxs module="phone">
var toHide = function(array) {
  var mphone = array.substring(0, 3) + '****' + array.substring(7);
  return mphone;
}
module.exports.toHide = toHide;
</wxs>

11、video，屬性用法

<video 
      id="myVideo" 
      src="{{url}}" 
      binderror="videoErrorCallback" 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}"
      controls
      title="課程"
      object-fit="fill"
      enable-auto-rotation="true"
      bindtimeupdate="bindtimeupdate"
    ></video>
//

 let videoCtx = wx.createVideoContext('myVideo', this)
videoCtx.pause()


//bindtimeupdate  獲取進度時間，根據時間來進行限制播放操作
bindtimeupdate:function(res){//播放中函數，查看當前播放時間等
        let video_status = this.data.video_status
        let that = this
        if (res.detail.currentTime > 10) {
            if (video_status === '0') {
                wx.showModal({
                    title: '登錄',
                    content: '試聽課程結束，如需繼續(xù)查看，請先登錄',confirmText:'確定',
                    success (res) {
                      if (res.confirm) {
                        wx.switchTab({
                            url: '/pages/user/user'
                        })
                      } else if (res.cancel) {
                        wx.navigateBack({
                          delta: 1,
                        })
                      }
                    }
                })
            } else if (video_status === '2'){
                let videoCtx = wx.createVideoContext('myVideo', this)
                videoCtx.pause()
                wx.showModal({
                    title: '購買課程',
                    content: '試聽課程結束，如需繼續(xù)查看，請先購買',confirmText:'立即支付',
                    success (res) {
                    if (res.confirm) {
                        that.onClickButton()
                    } else if (res.cancel) {
                        wx.navigateBack({
                        delta: 1,
                        })
                    }
                    }
                })
            }
            
        } else {
            
        }
    },

12、數據的存儲

//存
try {
          wx.setStorageSync('car', info)
        } catch (e) { }
//獲取
try {
      var value = wx.getStorageSync('car')
      if (value) {
        this.setData({
          ApplyContent:value
        })
      }
    } catch (e) {
    }

13、地圖使用

//官網
const QQMapWX = require('../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
    key: 'XSTBZ-G74CJ-7BVFQ-KC2JD-ONRK5-ZABGU'
})

getAddressLocation(){
        let that = this
        wx.getLocation({
        type: 'gcj02',
        success (res) {
            const latitude = res.latitude
            const longitude = res.longitude
            that.getAddress(latitude, longitude)
            
        }
        })
    },
    getAddress(latitude, longitude) {
        let that = this
        qqmapsdk.reverseGeocoder({
            location: {latitude,longitude},
            success(res) {
                console.log(res);
                var mks = []
                mks.push({ // 獲取返回結果，放到mks數組中
                    title: res.result.address,
                    id: 1,
                    latitude: latitude,
                    longitude: longitude,
                    iconPath: "../../img/mk.png", //圖標路徑
                    width: 20,
                    height: 20
                })
                that.setData({
                    address:res.result.address,
                    markers: mks,
                    latitude: latitude,
                    longitude: longitude,
                })
            }
        })
    },

14、點擊復制

copyBtn: function (e) {
        var currentidx = e.currentTarget.dataset.num;
        console.log(currentidx); 
        wx.setClipboardData({
        data: currentidx,
        success: function (res) {
            wx.showToast({
            title: '復制成功',
            });
        }
        });
    },

總結

到此這篇關于微信小程序開發(fā)常用功能點與使用方法的文章就介紹到這了,更多相關微信小程序開發(fā)常用功能點內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

javascript 事件加載與預加載
本文對JavaScript事件加載進行了一些延伸思考。加載多個事件時，使用window.onload可能會導致一些不便，而通過偵聽器等方法，則可以解決這些問題。
2009-12-12
微信小程序Echarts圖表組件使用方法詳解
這篇文章主要介紹了微信小程序Echarts圖表組件使用方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，
2019-06-06
bootstrap datetimepicker2.3.11時間插件使用
這篇文章主要為大家詳細介紹了bootstrap datetimepicker2.3.11時間插件使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
實例分析瀏覽器中“JavaScript解析器”的工作原理
本文主要對javascript解析器的工作原理進行實例分析，具有很好的參考價值，下面就跟小編一起來看下吧
2016-12-12
JavaScript中的回調函數實例講解
今天小編就為大家分享一篇關于JavaScript中的回調函數實例講解，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
js 無提示關閉瀏覽器頁面的代碼
js 無提示關閉瀏覽器頁面的代碼與函數需要的朋友可以參考下。
2010-03-03
js實現簡單選項卡功能
這篇文章主要為大家詳細介紹了使用JS實現簡單的選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
手把手教你在微信小程序中使用three.js(保姆級教程)
Three.js是一款運行在瀏覽器中的3D引擎,你可以用它創(chuàng)建各種三維場景,包括了攝影機、光影、材質等各種對象,下面這篇文章主要給大家介紹了關于如何在微信小程序中使用three.js的保姆級教程,需要的朋友可以參考下
2023-03-03
js 使用ajax設置和獲取自定義header信息的方法小結
這篇文章主要介紹了js 使用ajax設置和獲取自定義header信息的方法,結合實例形式總結分析了js 使用ajax自定義設置和獲取header響應信息相關操作技巧與使用注意事項,需要的朋友可以參考下
2020-03-03
JavaScript實現預覽本地上傳圖片功能完整示例
這篇文章主要介紹了JavaScript實現預覽本地上傳圖片功能,結合完整實例形式分析了javascript圖片預覽相關的格式正則驗證、瀏覽器判斷、頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下
2019-03-03