WebStrom 開發微信小程序配置詳細介紹

Visual Studio Code 開發微信小程序配置 (若發現minapp無效升級編輯器爲最新版本即可) 詳細介紹

WX:關鍵字

若想使用js表達式則必須使用 {{ }}

只能在App.js中使用App()來進行微信實例創建,頁面則使用Page().

其他頁面則可以使用getApp()來獲取App實例,App內則不允許這樣操作,可使用this來代替

可聲明公共方法,但需使用exports來導出,示例代碼如下

function sayHello() {
  return 'say Hello';
}
function sayHi() {
  return 'say Hi';
}
// 兩種導出方式
module.exports.sayHi = sayHi;
exports.sayHello = sayHello;


// 調用方式
var common = require('../../common/common')
common.sayHello()

wx:if wx:elif wx:else

示例代碼如下詳細介紹

<view wx:if='{{active==0}}'>wx:if激活</view>
<view wx:elif='{{active==1}}'>wx:elif激活</view>
<view wx:else>wx:else</view>

wx:for wx:for-item wx:for-index

示例代碼如下詳細介紹

wx:for-item默認爲item若想修改顯式修改即可

wx:for-index默認爲index若想修改顯式修改即可

wx:for 允許嵌套

wx:for 引號中的{{}} 不可缺少

<view wx:for="{{array}}" wx:for-item="item" wx:for-index="index">
  ID: {{index}},
  學生: {{item.name}},
  分數: {{item.fenshu}}分
</view>

wx:if 與 hidden 對比

wx:if 當爲true的時候纔會進行局部渲染, hidden則初始時就進行渲染.

若頻繁切換則使用hidden否則wx:if

template 自定義模板

示例代碼如下詳細介紹

注意點: 傳遞對象進入需要使用 "..." 符號 ,模板中則直接使用屬性即可

<template name="self_template">
  <view>
    <text> Name: {{name}}</text>
    <text> Age: {{age}}</text>
  </view>
</template>

<template is="self_template" data="{{...slefStudent}}"/>

// data中定義slefStudent
slefStudent:{
  name:'張三',
  age:16
}

Button

示例代碼如下

函數中event代表輸出事件對象

<button id='mybtn' bindtap="myTap">按鈕組件</button>


// js 腳本
myTap:function(event) {
  console.log(event)
},

bindtap catchtap 事件綁定與冒泡

示例代碼如下詳細介紹

結果爲當點擊c時,c和b所綁定事件都會調用點擊b則不會調用a的綁定事件

<!--  無父級對象不繼續向上冒泡  -->
<view id="a" bindtap="tap1">
  View A
  <!--  不繼續向上冒泡    -->
  <view id="b" catchtap="tap2">
    View B
    <!--  向id b 冒泡    -->
    <view id="c" bindtap="tap3">
      View C
    </view>
  </view>
</view>

// js
  tap1:function(e) {
    console.log('tap1')
  },
  tap2:function(e) {
    console.log('tap2')
  },
  tap3:function(e) {
    console.log('tap3')
  },

capture-bind capture-catch

capture-bind 在事件冒泡前捕獲事件

capture-catch 在事件冒泡前捕獲事件並阻斷冒泡

語法爲: capture-bind:key=value / capture-catch:key=value

第一行使用了 capture-catch:key=value 當點擊 B 時只響應 tap2

若修改爲capture-bind:key=value 則響應 tap2 -> tap4 -> tap3 -> tap1

<view id="A" bindlongtap="tap1" capture-catch:tap="tap2">
  view a
   <view id="B" bindtap="tap3" capture-bind:tap="tap4">
    view b
  </view>
</view>

import 與 include

import 可以將另一個文件中的模板引用過來,但不會引用該文件所引用的文件,避免相互連接導致邏輯錯誤

即爲 A引用B引用C 但A無法調用C

include 則相當於將目標文件複製到本文件中

WXSS

建議使用iphone6手機尺寸作爲視覺設計標準

rpx 可以根據屏幕寬度進行自適應

@import

可使用該方法導入其他css文件,示例代碼如下

@import "common.wxss";

style class

小程序同樣支持使用style與class並語法與h5基本相同,示例代碼如下

<!--        正常style        -->
<view style="background:red;width:100rpx;height:100rpx;"></view>
<!--        使用js變量        -->
<view style="background:red;width:{{width}};height:100rpx;"></view>
<!--        正常class        -->
<view class="box"></view>
<!--        使用js變量        -->
<view class="{{className}}"></view>

標籤樣式

以下代碼將所有view標籤設置寬度爲100rpx,高度爲30rpx背景色爲紅色

view{
    width: 100rpx;
    height: 30rpx;
    background-color: red;
}

全局樣式與局部樣式

app.wxss 爲全局樣式將應用於所有的page頁面樣式中,

每個頁面的wxss爲局部樣式只作用於本頁面並會覆蓋全局樣式

Flex 佈局

參考鏈接

WXML

scroll-view

示例代碼如下: 詳細屬性及解釋

WXML

<view class="self_container">
  <view class="title">scroll-view的簡單應用</view>
  <view class="scroll-box">
    <view class="title">豎向滾動</view>
    <scroll-view class="scroll-view-y" scroll-y> 
      <view class="scroll-item">第一頁</view>
      <view class="scroll-item">第二頁</view>
      <view class="scroll-item">第三頁</view>
    </scroll-view>
  </view>


    <view class="scroll-box">
    <view class="title">橫向滾動</view>
    <scroll-view class="scroll-view-x" scroll-x="{{true}}"> 
      <view class="scroll-item scroll-item-x">第一頁</view>
      <view class="scroll-item scroll-item-x">第二頁</view>
      <view class="scroll-item scroll-item-x">第三頁</view>
    </scroll-view>
  </view>
</view>

WXSS

注意: 若橫向滾動時需要給 scroll-view 設置 white-space:nowrap; 和元素 display: inline-block;否則無法橫向滾動

.self_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.scroll-view-x{
    background-color: wheat;
    width: 300rpx;
    height: 300rpx;
    white-space: nowrap;
}

.scroll-view-y{
    background-color: wheat;
    width: 300rpx;
    height: 300rpx;
}

.scroll-item{
    width: 100%;
    height: 300rpx;
    line-height: 300rpx;
}

.scroll-item-x{
    display: inline-block;
}

swiper

較爲簡單根據文檔即可參考鏈接

movable-view

需要配合movable-area標籤一起使用且movable-view需是movable-area的直接子級否則不起作用!

示例代碼如下: 詳細屬性及解釋

WXML

<view class="self_container">
  <!--  scale-area爲是否支持雙指縮放   -->
  <movable-area scale-area="{{false}}">
    <movable-view 
    direction="all"
    scale="{{true}}"></movable-view>
  </movable-area>
</view>

WXSS

.self_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

movable-area{
    position:absolute;
    width: 100%;
    height: 100%;
    background-color: wheat;
}
movable-view{
    width: 300rpx;
    height: 100rpx;
    background-color: royalblue;
}

cover-view 與 cover-image

該組件可以覆蓋到原生組件之上,如 map,video,canvas,camera,live-player,live-pusher等,以上標籤內只允許button,cover-view,cover-image標籤,示例代碼如下

WXML

<!--  cover-view  -->
<view class="self_container">
  <map class="self-map">
    <button class="map-button">測試按鈕</button>
    <cover-view >cover-view
    </cover-view>
  </map>
</view>

WXSS

.self_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.self-map{
    width: 100%;
    height: 500rpx;
}

API

以下概述了常用的API方法若想詳細瞭解功能可至文檔瞭解

// 通用API
wx.scanCode(object)			// 掃描二維碼功能
wx.setClipboardData(object)		// 設置剪切板內容
wx.makePhoneCall(object)		// 撥打電話
wx.addPhoneContact(object)		// 向通訊錄添加聯繫人
wx.setScreenBrightness(object)		// 修改屏幕亮度
wx.getScreenBrightness(object)		// 獲取屏幕亮度
wx.setKeepScreenOn(object)		// 設置屏幕常亮
wx.vibrateLong(object)		// 手機長震動
wx.vibrateShort(object)		// 手機短震動
wx.pageScrollTo(object)		// 將頁面滑動到目標位置
wx.startPullDownRefresh(object)	// 調用下拉刷新等同於用戶手動刷新
wx.stopPullDownRefresh(object)	// 停止下拉刷新


// 通用event
wx.onUserCaptureScreen(function)	// 監聽用戶截屏功能
wx.onMemoryWarning(function)	// 監聽內存不足告警事件
onPullDownRefresh()		// 監聽下拉刷新事件


// 媒體組件API
//  - 圖片
wx.chooseImage(object)		// 打開本地相冊/攝像機選擇照片
wx.previewImage(object)		// 圖片預覽
wx.saveImageToPhotosAlbum(object)	// 保存圖片到系統相冊
wx.getImageInfo(object)		// 獲取圖片的信息(寬度,高度等)


//  - 音頻
wx.getBackgroundAudioManager()	// 獲取全局唯一背景音頻管理器
wx.createInnerAudioContext()		// 創建並返回audio組件


//  - 視頻API
wx.chooseVideo(object)		// 選擇視頻/攝像機錄製
wx.saveVideoToPhotosAlbum(object)	// 保存視頻到系統相冊
wx.createVideoContext(videoId)	// 創建並返回視頻對象

//  - 相機
	// 需在WXML中聲明且只能聲明一個camera
wx.createCameraContext()		// 創建並返回攝像機對象(拍照,視頻錄製)


// 文件信息API
wx.downloadFile(object)		// 下載文件 (文件下載完畢之後會存儲再臨時目錄tempFilePath)
wx.saveFile(object)			// 存儲文件 (需已經下載之後保存即使用臨時目錄中的文件路徑保存)
wx.removeSavedFile(object)		// 刪除存儲文件
wx.openDocument(object)		// 打開文件 (需已下載文件,支持格式:doc,xls,ppt,pdf,docx,xlsx,pptx)


// 數據緩存功能API
// 	注意每臺設備只有10M數據存儲上限
wx.setStorage(object)		// 異步存儲數據
wx.getStorage(object)		// 異步獲取數據
wx.getStorageInfo(object)		// 異步獲取當前已存儲的數據
wx.clearStorage()			// 異步清空數據
wx.setStorageSync(string,string|object)	// 同步存儲數據
wx.getStorageSync(string)		// 同步獲取數據
wx.getStorageInfoSync()		// 同步獲取當前已存儲的數據
wx.clearStorageSync()		// 同步清空數據


// 位置信息API
wx.chooseLocation(object)		// 地圖選點 (會頁面跳轉)
wx.getLocation(object)		// 獲取本機經緯度
wx.openLocation(object)		// 查看位置
wx.createMapContext(mapId)		// 創建並返回地圖對象(需在WXML中聲明map)


// 設備API
wx.getNetworkType(object)		// 獲取當前網絡狀態
wx.onNetworkChange(function)	// 監聽網絡變化
wx.canIUse(object)			// 判斷API是否可以使用
wx.getSystemInfo(object)		// 獲取當前設備信息
//  - wi-fi
wx.startWifi(object)			// 打開wifi
wx.stopWifi(object)			// 關閉wifi
wx.getWifiList()			// 獲取wifi列表(需使用wx.onGetWifiList()監聽事件獲取返回數據)
wx.onGetWifiList(function)		// 當調用getWifiList時數據將返回本函數
wx.connectWifi(object)		// 鏈接wifi
wx.onWifiConnected(function)		// 鏈接wifi事件
wx.getConnectedWifi(object)		// 獲取當前wifi信息
//  - 羅盤
wx.startCompass(object)		// 開始羅盤監聽
wx.stopCompass(object)		// 結束羅盤監聽
wx.onCompassChange(function)	// 羅盤數據改變事件
//  - 加速度
wx.startAccelerometer(object)		// 開始加速度監聽
wx.stopAccelerometer(object)		// 結束加速度監聽
wx.onAccelerometerChange(function)	// 加速度數據改變事件


//界面API
wx.showToast(object)		// 消息提示框
wx.showLoading(object)		// 加載提示框
wx.showModal(object)		// 模態彈窗(會有取消和確定回調)
wx.showActionSheet(object)		// 從底部彈出的操作菜單(會返回選擇的索引)
//  - 導航條
wx.setNavigationBarTitle(object)	// 設置導航欄標題
wx.showNavigationBarLoading()	// 顯示導航條的加載動畫
wx.hideNavigationBarLoading()		// 隱藏導航條的加載動畫
wx.setNavigationBarColor(object)	// 修改導航條的背景顏色
//  - 底部tabbar
wx.setTabBarBadge(object)		// 爲tabbar某一項的右上角添加文本
wx.removeTabBarBadge(object)	// 取消tabbar某一項的右上角文本
wx.showTabBarRedDot(object)		// 爲tabbar某一項的右上角添加紅點提示
wx.hideTabBarRedDot(object)		// 取消tabbar某一項的右上角取消紅點提示
wx.setTabBarStyle(object)		// 動態設置tabbar樣式
wx.setTabBarItem(object)		// 單獨設置某一項的樣式
wx.showTabBar(object)		// 顯示Tabbar
wx.hideTabBar(object)		// 隱藏Tabbar


// 頁面導航
wx.navigateTo(object)		// 需要跳轉的頁面(非tabbar頁面)
wx.navigateBack(object)		// 關閉當前頁面,返回上一級或多級頁面
wx.redirectTo(object)			// 關閉當前頁面,頁面重定向到指定頁面
wx.reLaunch(object)			// 重啓頁面,關閉所有頁面跳轉到指定頁面
wx.switchTab(object)			// 切換tabbar頁面


// 設置權限相關
wx.getSetting(object)		// 獲取設置以及權限
wx.openSetting(object)		// 打開設置

微信小程序簡單理解與基本操作

WX:關鍵字

wx:if wx:elif wx:else

wx:for wx:for-item wx:for-index

wx:if 與 hidden 對比

template 自定義模板

Button

bindtap catchtap 事件綁定與冒泡

capture-bind capture-catch

import 與 include

WXSS

@import

style class

標籤樣式

全局樣式與局部樣式

Flex 佈局

WXML

scroll-view

swiper

movable-view

cover-view 與 cover-image

API

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

微信小程序簡單理解與基本操作

Vue Transition 擠壓其他元素問題

Vue $router 路由的使用

JavaScript 序列化時間

PHP ThinkPHP5.0如何部署網頁

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

微信小程序 簡單理解與基本操作

WX:關鍵字

wx:if wx:elif wx:else

wx:for wx:for-item wx:for-index

wx:if 與 hidden 對比

template 自定義模板

Button

bindtap catchtap 事件綁定與冒泡

capture-bind capture-catch

import 與 include

WXSS

@import

style class

標籤樣式

全局樣式與局部樣式

Flex 佈局

WXML

scroll-view

swiper

movable-view

cover-view 與 cover-image

API

微信小程序簡單理解與基本操作