微信小程序開發(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>
//獲取點擊數(shù)據(jù)
let id = e.currentTarget.dataset.id
5、wx:for
//在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復渲染該組件。
//默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
//或者
//使用 wx:for-item 可以指定數(shù)組當前元素的變量名，
//使用 wx:for-index 可以指定數(shù)組當前下標的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
6、data里面的數(shù)據(jù)
//存儲
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 獲取進度時間，根據(jù)時間來進行限制播放操作
bindtimeupdate:function(res){//播放中函數(shù)，查看當前播放時間等
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、數(shù)據(jù)的存儲
//存
try {
wx.setStorageSync('car', info)
} catch (e) { }
//獲取
try {
var value = wx.getStorageSync('car')
if (value) {
this.setData({
ApplyContent:value
})
}
} catch (e) {
}
13、地圖使用
//官網(wǎng)
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數(shù)組中
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ā)常用功能點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文對JavaScript事件加載進行了一些延伸思考。加載多個事件時，使用window.onload可能會導致一些不便，而通過偵聽器等方法，則可以解決這些問題。2009-12-12
這篇文章主要介紹了微信小程序Echarts圖表組件使用方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，2019-06-06
bootstrap datetimepicker2.3.11時間插件使用
這篇文章主要為大家詳細介紹了bootstrap datetimepicker2.3.11時間插件使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文主要對javascript解析器的工作原理進行實例分析，具有很好的參考價值，下面就跟小編一起來看下吧2016-12-12
JavaScript中的回調(diào)函數(shù)實例講解
今天小編就為大家分享一篇關于JavaScript中的回調(diào)函數(shù)實例講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
js 無提示關閉瀏覽器頁面的代碼與函數(shù)需要的朋友可以參考下。2010-03-03
這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡單的選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Three.js是一款運行在瀏覽器中的3D引擎,你可以用它創(chuàng)建各種三維場景,包括了攝影機、光影、材質(zhì)等各種對象,下面這篇文章主要給大家介紹了關于如何在微信小程序中使用three.js的保姆級教程,需要的朋友可以參考下2023-03-03
js 使用ajax設置和獲取自定義header信息的方法小結
這篇文章主要介紹了js 使用ajax設置和獲取自定義header信息的方法,結合實例形式總結分析了js 使用ajax自定義設置和獲取header響應信息相關操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03
JavaScript實現(xiàn)預覽本地上傳圖片功能完整示例
這篇文章主要介紹了JavaScript實現(xiàn)預覽本地上傳圖片功能,結合完整實例形式分析了javascript圖片預覽相關的格式正則驗證、瀏覽器判斷、頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-03-03