欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序的基本使用知識(shí)點(diǎn)（非常全面，推薦?。?/h1>
 更新時(shí)間：2021年06月23日 11:33:47   作者：像大前端挺進(jìn)  
開(kāi)發(fā)一個(gè)小程序在如今來(lái)講是較為簡(jiǎn)單的,但其實(shí)還是有很多的知識(shí)點(diǎn)需要大家記住,這篇文章主要給大家介紹了關(guān)于微信小程序基本使用的相關(guān)資料,需要的朋友可以參考下

注冊(cè)App時(shí)做什么呢？

  1. 判斷小程序的進(jìn)入場(chǎng)景
  2. 監(jiān)聽(tīng)生命周期函數(shù)，在生命周期中執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯，比如在某個(gè)生命周期函數(shù)中獲取微信用戶的信息。
  3. 因?yàn)锳pp()實(shí)例是全局共享的（單例對(duì)象），所以我們可以將一些共享數(shù)據(jù)放在這里。

注冊(cè)page頁(yè)面時(shí)，我們一般需要做什么呢？

  1. 在生命周期中發(fā)送網(wǎng)絡(luò)請(qǐng)求，從服務(wù)器獲取數(shù)據(jù)；
  2. 初始化一些數(shù)據(jù)，以方便被wxml引用展示
  3. 監(jiān)聽(tīng)wxml中的一些事件，綁定對(duì)應(yīng)的事件函數(shù)
  4. 其他一些監(jiān)聽(tīng)，（比如頁(yè)面滾動(dòng)，上拉刷新，下拉加載更多等）

關(guān)于wxml的template和include

在wxml中是不能直接調(diào)用Page/Component中定義函數(shù)的

在wxml文件中定義template標(biāo)簽，template標(biāo)簽在沒(méi)有調(diào)用的情況下是不會(huì)進(jìn)行任何渲染

name屬性和is屬性對(duì)應(yīng)；可以使用{{}}語(yǔ)法

<template name="compoent">
<view>哈哈哈</view>
  <text>嘿嘿嘿</text>
  <text>{{name}}</text>
  <text>{{age}}</text>
</template>
<template is="compoent"/>
<template is="compoent"/>
<template is="compoent"/>
<template is="compoent" data= "{{name: '小屏', age:'123'}}" />

關(guān)于wxml的導(dǎo)入有兩種方式:

import導(dǎo)入：

1:主要是導(dǎo)入template

2：特點(diǎn)是 不能進(jìn)行遞歸導(dǎo)入

include引入：

1：將公共的組件抽取到一個(gè)文件中

特點(diǎn)：不能導(dǎo)入template/wxs/可以進(jìn)行遞歸導(dǎo)入

wxs模塊

wxs模塊是小程序的一套腳本語(yǔ)言結(jié)合wxml,可以構(gòu)建出頁(yè)面的結(jié)構(gòu)

wxs與javascript是不同的語(yǔ)言，有自己的語(yǔ)法，并不和JavaScript一致。（不過(guò)基本一致）

在wxml中是不能直接調(diào)用Page/Component中定義函數(shù)的

但是某些情況下，我們希望使用函數(shù)來(lái)處理wxml中的數(shù)據(jù)（類似Vue在的過(guò)濾器），這個(gè)時(shí)候就使用wxs了

wxl使用的限制和特點(diǎn)：

WXS的運(yùn)行環(huán)境和其他的JavaScript代碼是隔離的，wxs中不能調(diào)用其他Javascript文件中定義的函數(shù)，也不能調(diào)用小程序中的API

wxs不能作為數(shù)組的函數(shù)回調(diào)。

由于運(yùn)行環(huán)境的差異，在ios設(shè)備上的小程序內(nèi)的wxs會(huì)比JavaScript快2~20.倍，在android設(shè)備上二者運(yùn)行效率無(wú)差異。

小程序組件化相關(guān)

小程序組件和調(diào)用該組件的頁(yè)面樣式互不影響。

調(diào)用組件需要在頁(yè)面的json文件中加入組件名稱和路徑

{
  "usingComponents": {
    "my-cut":"/pages/compent/my-cut"  }
}

在有需要是頁(yè)面和組件間的樣式相互影響的時(shí)候，可以利用options的 styleIsolation屬性

在組件的js文件Component({})下面

  // 在組件里面設(shè)置options的 styleIsolation: "apply-shared"會(huì)是頁(yè)面設(shè)置的樣式屬性影響組件的樣式
  // 在組件里面設(shè)置options的 styleIsolation: "shared"會(huì)是頁(yè)面設(shè)置的樣式屬性影響組件的樣式
  Component({
	options:{
    styleIsolation: "apply-shared"
  },
})

組件間的動(dòng)態(tài)轉(zhuǎn)值使用properties屬性

在組件中可以利用externalClasses這個(gè)屬性來(lái)動(dòng)態(tài)設(shè)置設(shè)置css的樣式

Component({
properties: {
    // title: String
    title:{
      type: String,
      value:"我是默認(rèn)值",
      //監(jiān)聽(tīng)新值和舊值
      observer: function(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    },
    
  },
    // 在組件中可以利用這個(gè)屬性來(lái)動(dòng)態(tài)設(shè)置設(shè)置css的樣式
  externalClasses:["tltleclass"]

})

在頁(yè)面中調(diào)用屬性

<my-cut title="哈哈" tltleclass="red"></my-cut>
<my-cut title="嘿嘿" tltleclass="green" />
<my-cut/>

頁(yè)面css文件

.red{
  color: red;
}
.green{
  color: green;
}

組件到頁(yè)面間的函數(shù)調(diào)用

在頁(yè)面使用組件的時(shí)候，我們有時(shí)候會(huì)需要修改組件的數(shù)據(jù)，這就需要我們?cè)陧?yè)面的js文件調(diào)用到組件的data。

在小程序中有個(gè)selectComponent('.class/#xxx')可以拿到組件對(duì)象；

組件wxml

<view class="contention">
  <block wx:for="{{titled}}" wx:key="index">
    <view class="tit"> <text class="intext {{index == increat? 'active' : ''}}" data-count="{{index}}" bindtap="targetTap">{{item}}</text> </view>
  </block>
</view>

組件js

methods: {
    targetTap(e){
      const index  = e.currentTarget.dataset.count
      this.setData({
        increat:index
      })
        this.triggerEvent("targetCount" , {})
    },
    amend(){
      this.setData({
        titled: ["政治", "數(shù)學(xué)", "英語(yǔ)"]
      })
    }

  }

頁(yè)面wxml

<switch titled="{{list}}" bind:targetCount="targetCount" class="sw-class"></switch>

頁(yè)面js

  targetCount(){
  //獲取組件對(duì)象
    const content = this.selectComponent('.sw-class') 
    console.log(content)
    // content.setData({
    //   titled:["政治", "數(shù)學(xué)", "英語(yǔ)"]
    // })
    // 開(kāi)放規(guī)范一般不推薦這種直接在函數(shù)的修改方法，建議在組件內(nèi)使用methods內(nèi)部以方法的形式修改，在頁(yè)面調(diào)用即可
    content.amend()
  },

小程序組件插槽的使用

單插槽

組件wxml

<view>
  我是一個(gè)標(biāo)題
</view>
<slot></slot>
<view>
  我是一個(gè)內(nèi)容
</view>

頁(yè)面wxml使用

<my-slot>
<button size="mini"> 按鈕</button>
</my-slot>
<my-slot>
 <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.woyaogexing.com%2F2021%2F04%2F26%2F1b402c98095d452486508b8250b21f3f%21360x640.jpeg&refer=http%3A%2F%2Fimg2.woyaogexing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625711145&t=d9d310d5e9c878a9d4b7bc7057f2b754"/>
</my-slot>
<my-slot>
  <slider value="20"></slider>
</my-slot>

多個(gè)插槽的使用

需要給每一個(gè)插槽取一個(gè)名字使用name屬性

必須在component對(duì)象下面的options對(duì)象下面的multipleSolts屬性設(shè)置為true

組件wxml

<view>我是多插槽的標(biāo)題</view>
<view> <slot name="slot1" ></slot> </view>
<view> <slot name="slot2" ></slot> </view>
<view> <slot name="slot3" ></slot> </view>
<view>我是多插槽的尾部</view>

組件js文件

Component({
  /**
   * 組件的屬性列表
   */
  options:{
    multipleSlots:true
  }
  )}

頁(yè)面的使用

<!-- 多插槽的使用 -->
<!-- 注意事項(xiàng):
需要給每一個(gè)插槽取一個(gè)名字
必須在component對(duì)象下面的options對(duì)象下面的multipleSolts屬性設(shè)置為true -->
<my-mslot>
<button slot="slot3">415461</button>
<slider slot="slot1" value="20"></slider>
<text slot="slot2">呵呵呵呵呵</text>
</my-mslot>

小程序組件的Component構(gòu)造器有那些作用

1 properties 讓使用者可以給組件傳入數(shù)據(jù)

properties:{ 
	title: string,
	content:{
	type: array,
	value:[1,2.3],
	observer:function(newVal,oldVal){
        console.log(newVal,oldVal)
      }
	}
}

2.data 定義一些組件的初始化數(shù)據(jù)

data:{
	counter：0
}

3 methods 用于定義組件內(nèi)部的函數(shù)

methods:{
foo(){
	
}
}

4 options 定義組件的配置選項(xiàng)

options:{
//在需要使用多插槽時(shí)設(shè)置為true
	multipleSlots:true,
	//設(shè)置樣式的隔離方式
	styleIsolation: "apply-shared", //頁(yè)面設(shè)置的樣式屬性影響組件的樣式
   //styleIsolation: "shared"  頁(yè)面設(shè)置的樣式屬性影響組件的樣式
}

5 externalClasses 定義外部傳入額外的樣式

externalClasses:["on","tre"]

6 observers可以監(jiān)聽(tīng)properties/data的改變

observers:{
	counter: function(newVal){
		console.log(newVal)
	}
}

7 監(jiān)聽(tīng)所在頁(yè)面的生命周期

在組件js文件

  pageLifetimes:{
    show(){
      console.log("監(jiān)聽(tīng)組件所在頁(yè)面顯示出來(lái)的")
    },
    hide(){
      console.log("監(jiān)聽(tīng)組件所在頁(yè)面隱藏起來(lái)的時(shí)候")
    },
    resize(){
      console.log("監(jiān)聽(tīng)頁(yè)面尺寸的改變")
    }
  }

監(jiān)聽(tīng)組件內(nèi)生命周期

lifetimes:{
    created(){
      console.log("組件被創(chuàng)建")
    },
    attached(){
      console.log("組件被添加到頁(yè)面中")
    },
    ready(){
      console.log("組件被渲染出來(lái)")
    },
    moved(){
      console.log("組件被移動(dòng)到節(jié)點(diǎn)樹(shù)的另一個(gè)位置")
    },
    detached(){
      console.log("組件")
    }
  }

小程序網(wǎng)絡(luò)請(qǐng)求

onReady: function () {
    wx.request({
      url: 'http://httpbin.org/post',
      method:'post',
      data:{
        name:"wangshuai",
        age:19
      },
      success:function(res){
          console.log(res)
      }
    })
  },

比較關(guān)鍵的幾個(gè)屬性

  1. url: 必傳
  2. data: 請(qǐng)求參數(shù)
  3. method:請(qǐng)求的方式
  4. success:成功時(shí)的回調(diào)
  5. fail:失敗時(shí)的回調(diào)

一般情況下為了降低網(wǎng)絡(luò)請(qǐng)求和wx.request的耦合度，我們會(huì)Promise的方法獲取回調(diào)結(jié)果

使用promise封裝

export default function request(option) {
    return new Promise( (resolve, reject) => {
      wx.request({
        url: option.url,
        method: option.method || 'get',
        data: option.data || {},
        success: function (res) {
            resolve(res)
        },
        fail: function (res) {
          reject(res)
        }
      })
    })
}

頁(yè)面調(diào)用

 onReady: function () {
    //小程序原生網(wǎng)絡(luò)請(qǐng)求
    // wx.request({
    //   url: 'http://httpbin.org/post',
    //   method:'post',
    //   data:{
    //     name:"wangshuai",
    //     age:19
    //   },
    //   success:function(res){
    //       console.log(res)
    //   }
    // })
    request({url: 'http://httpbin.org/post',method:"post"}).then(res=>{
      console.log(res)
    }).catch(err =>{
      console.log(err)
    })
  },

小程序中的彈窗展示

頁(yè)面wxml

<button size="mini" bindtap="showToast">showToast</button>
<button size="mini" bindtap="showModal">showModal</button>
<button size="mini" bindtap="showLoading">showLoading</button>
<button size="mini" bindtap="showAction">showAction</button>
<button size="mini" open-type="share">分享</button>

頁(yè)面js文件

Page({
	showToast(){
    wx.showToast({
      title: '我是showToast',
    })
  },
  showModal(){
    wx.showModal({
      title:'是否刪除',
      cancelColor: 'cancelColor',
      success:function (params) {
          console.log(params)
          if (params.cancel) {
              console.log("點(diǎn)擊了取消刪除")
          } 
      } 
    })
  },
  showLoading(){
    wx.showLoading({
      title: '等待中',
      mask: true //給一個(gè)遮罩，防止其他操作
    })
    setTimeout(()=>{
      wx.hideLoading({
        success: (res) => {},
      })
    },1500)
  },
  showAction(){
    wx.showActionSheet({
      itemList: ['拍照','文件'],
    })
  }
})

小程序頁(yè)面分享

小程序的分享方式有兩種，一種是點(diǎn)擊按鈕分享，另一種是點(diǎn)擊右上角的菜單選項(xiàng)選擇分享。

我們分享小程序的時(shí)候需要通過(guò)onShareAppMessage來(lái)展示分享信息

監(jiān)聽(tīng)用戶點(diǎn)擊頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕（button 組件 open-type=“share”）或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為，并自定義轉(zhuǎn)發(fā)內(nèi)容。

注意：只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕
此事件處理函數(shù)需要 return 一個(gè) Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容，返回內(nèi)容如下：

關(guān)于小程序的跳轉(zhuǎn)

navigator標(biāo)簽

關(guān)于navigator跳轉(zhuǎn)使用url.

<navigator url="/pages/home/home">跳轉(zhuǎn)home</navigator>

跳轉(zhuǎn)屬性open-type有如下取值

redirect：關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到tabBer頁(yè)面，并且不能返回

switchTab：跳轉(zhuǎn)到tabBer頁(yè)面，并關(guān)閉其他非tabber頁(yè)面（需要在tabBer中定義）

reLaunch：關(guān)閉所有頁(yè)面，打開(kāi)某個(gè)頁(yè)面（直接展示某個(gè)頁(yè)面，斌切可以跳轉(zhuǎn)到tabBer頁(yè)面）

<navigator url="/pages/home/home">跳轉(zhuǎn)home</navigator>
<navigator url="/pages/home/home" open-type="redirect">跳轉(zhuǎn)home(redirect)</navigator>
<navigator url="/pages/home/home" open-type="reLaunch">跳轉(zhuǎn)home(reLaunch)</navigator>
<navigator url="/pages/home/home" open-type="switchTab">跳轉(zhuǎn)home(switchTab)</navigator>

總結(jié)

到此這篇關(guān)于小程序的基本使用的文章就介紹到這了,更多相關(guān)小程序基本使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論