微信小程序開發(fā)基礎(chǔ)知識

vscode配置

vscode開發(fā)微信小程序安裝的插件:

wechat-snippet
微信小程序代碼輔助,代碼片段自動完成
minapp
微信小程序標簽郎嫁、屬性的智能補全（同時支持原生小程序湘纵、mpvue 和 wepy 框架，并提供 snippets）
需要輸入才會觸發(fā)標簽補全
輸入空格會觸發(fā)對應(yīng)標簽的屬性補全
wxapp-helper
選擇創(chuàng)建wx組件更扁，自動生成配套的文件，簡直不要太爽

微信小程序目錄

結(jié)構(gòu)對比

基本項目目錄

列表渲染

普通數(shù)組

list:[1,2,3,4,5]
wx:key="*this"

復(fù)雜的數(shù)組

<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'
   }]
 }
})

條件渲染

<view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>
<view hidden="{{condition}}"> True </view

屬性會被覆蓋

事件綁定

輸入框內(nèi)容發(fā)生改變的時候會觸發(fā)handleInput函數(shù),并且傳過去event事件對象

//不能帶參數(shù)俊扭，因為微信小程序會把方法名和后面的括號和參數(shù)當(dāng)做方法名的一部分
<input bindinput="handleInput" />

Page({
data:{
num: 0
},
  // 綁定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改變了");
    //賦值
    this.setData({
        num:e.datail.value
    })
 }
})

點擊事件 bindtab

//傳參的話只能是通過自定義屬性來獲取已添，這個屬性在事件對象里面
<button bindtab="btnClick" data-operation="{{1}}">點擊</button>

樣式WXSS

不支持通配符 *
尺寸單位：css里面使用 calc(),
rpx （responsive pixel）: 可以根據(jù)屏幕寬度進??適應(yīng)。規(guī)定屏幕寬為 750rpx 鸿摇。如在
iPhone6 上石景，屏幕寬度為 375px ，共有750個物理像素，則 750rpx = 375px = 750物理像
素潮孽， 1rpx = 0.5px = 1物理像素揪荣。
全局樣式導(dǎo)入到局部的樣式文件里面用 @import

//使用相對路徑
@import "common.wxss";

常見組件

view就類似于以前的div
text 相當(dāng)于span
1. ?本標簽
2. 只能嵌套text
3. ?按?字可以復(fù)制（只有該標簽有這個功能）
4. 可以對空格回? 進?編碼
image 默認（ 320px * 240px ）
switer 輪播圖
輪播圖的外層容器 swiper
每一個輪播項 swiper-item
swiper標簽存在默認的樣式：
width：100%=100vw ------height:150px
所以要給swiper根據(jù)圖片設(shè)置高度
swiper寬度 / swiper高度 == 圖片寬度 / 圖片高度
自動輪播：
swiper標簽設(shè)置 autoplay
navigator 類似于超鏈接標簽（塊級元素）
默認不能跳轉(zhuǎn)到tabbar綁定的頁面上
rich-text 富文本標簽
可以將字符串解析成對應(yīng)標簽，類似 vue中 v--html 功能

<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>

button
開發(fā)能力 open-type屬性值

獲取到的電話號碼是加密過的往史，需要自己搭建后臺進行解密
radio仗颈，需要配合 radio-group 使用

radio可以設(shè)置color屬性
checkbox 要配合 checkbox-group 里面

自定義組件

使用方法，注意誰實用就在誰的配置文件里面使用

數(shù)組傳遞之父傳子

父

子

數(shù)據(jù)之子傳父

子

父

小程序的生命周期函數(shù)

應(yīng)用生命周期

onPageNotFound 作用
如果頁面不存在了椎例，通過js的方式來跳轉(zhuǎn)頁面挨决，重新調(diào)到第二個首頁，但是不能跳轉(zhuǎn)到tabbar頁面订歪，和導(dǎo)航組件相似

頁面生命周期

小程序框架

原生框架 mina

請求參數(shù)

本地緩存

不同于web緩存的是凰棉，小程序以什么格式進行緩存，那去除的時候就是以什么格式取出
將數(shù)據(jù)村到本地

//講數(shù)據(jù)放入到本地緩存中
      wx.setStorageSync('cates', { time: Date.now(), data: this.categories })

讀取本地的緩存

if (Date.now() - Cates.time > 1000 * 10) {
        this.getCategoryData()
      } else {
        //用舊數(shù)據(jù)
        this.categories = Cates.data
        this.setData({
          leftMenus: this.categories.map((item) => {
            return item.cat_name
          }),
          rightContent: this.categories[0].children,
        })
      }

css四行代碼不換行

            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;

處理webp格式的圖片

res.replace(/\.webp/g, '.jpg')

最后編輯于：2021.08.20 14:26:21

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者