協(xié)同工作和發(fā)布

1.了解項目成員的組織結(jié)構(gòu)

2.小程序開發(fā)流程

3.不同項目成員的權限

4.開發(fā)者權限

1. 開發(fā)者權限:可使用小程序開發(fā)者工具及對小程序的功能進行代碼。
2. 開發(fā)體驗者權限:可使用體驗版小程序。
3. 登錄權限:可登錄小程序管理后臺，無需管理員確認。
4. 開發(fā)設置:設置小程序服務器域名、消息推送及掃描普通鏈接二維碼打開。
5. 小程序騰訊云管理:云開發(fā)相關設置。

小程序的版本

在軟件開發(fā)過程中，根據(jù)時間節(jié)點的不同，會產(chǎn)出不同的軟件版本，例如:

1. 開發(fā)者編寫代碼的同時，對項目代碼進行自測(開發(fā)版本)。
2. 直到程序達到一個穩(wěn)定可體驗的狀態(tài)時，開發(fā)者把體驗版本給到產(chǎn)品經(jīng)理和測試人員進行體驗測試。
3. 最后修復完程序的Bug后，發(fā)布正式版供外部用戶使用。
   

1.小程序發(fā)布上線的整體步驟

一個小程序的發(fā)布上線，一般要經(jīng)過上傳代碼–>提交審核–>發(fā)布這三個步驟.

2.上傳代碼

1. 點擊開發(fā)者工具頂部工具欄中的“上傳”按鈕
2. 填寫版本號以及項目備注

3.在后臺查看上傳之后的版本

登錄小程序管理后臺->管理->版本管理-→開發(fā)版本，即可查看剛才提交上傳的版本了：

4.提交審核

• 為什么需要提交審核：為了保證小程序的質(zhì)量，以及符合相關的規(guī)范，小程序的發(fā)布是需要經(jīng)過騰訊審核的。
  提交審核的方式：在開發(fā)版本的列表中，點擊“提交審核”按鈕之后，按照頁面提示填寫相關的信息能把小程序提交到騰訊官方進行審核。

5.發(fā)布

審核通過之后，管理員的微信中會收到小程序通過審核的通知，此時在審核版本的列表中，點擊“發(fā)布”按鈕之后，即可把“審核通過”的版本發(fā)布為“線上版本”，供所有小程序用戶訪問和使用。

6.推廣小程序

可以使用普通二維碼和小程序碼，相對于普通二維碼來說，小程序碼的優(yōu)勢如下：

• 在樣式上更具辨識度和視覺沖擊力
• 能夠更加清晰地樹立小程序的品牌形象
• 可以幫助開發(fā)者更好地推廣小程序

獲取小程序碼的5個步驟：
登錄小程序管理后臺->設置->基本設置-→基本信息->小程序碼及線下物料下載

運營數(shù)據(jù)

查看小程序運營數(shù)據(jù)

在“小程序后臺”查看

1. 登錄小程序管理后臺
2. 點擊側(cè)邊欄的“統(tǒng)計”
3. 點擊相應的選項卡可以看到相關的數(shù)振

使用“小程序數(shù)據(jù)助手”查看

1. 打開微信
2. 搜索“小程序數(shù)據(jù)助手”
3. 查看已發(fā)布的小程序相關的數(shù)據(jù)

WXML語法

數(shù)據(jù)綁定

1.數(shù)據(jù)綁定的基本原則：在Data中定義數(shù)據(jù)、在wxml中使用數(shù)據(jù)

2.在數(shù)據(jù)中定義頁面的數(shù)據(jù)：在頁面對應的.js文件中，把數(shù)據(jù)定義到Data對象中即可：

3.Mustache語法的格式

把data中的數(shù)據(jù)綁定到頁面中渲染，使用Mustache語法(雙大括號)將變量包起來即可。語法格式為：

<view>{{需要綁定的數(shù)據(jù)名稱}}</view>
<view>{{info}}</view>/*就會在頁面中顯示init */

4.動態(tài)綁定屬性

頁面的數(shù)據(jù)如下：

page({
	data{
 		imgSrc：‘http：//ww.xxxx.com/images/logo.png’
	}
})

頁面的結(jié)構(gòu)如下：

<Image src="{{imgSrc}}"></Image>

5.三元運算符

true/false ? (true)do : (false) do

事件綁定

1.什么是事件

事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進行業(yè)務的處理。

2.小程序中常用的事件

3.事件對象的屬性列表

當事件回調(diào)觸發(fā)的時候，會收到一個事件對象事件，它的詳細屬性如下表所示：

4.target和currentTarget的區(qū)別

target是觸發(fā)該事件的源頭組件，而currentTarget則是當前事件所綁定的組件。舉例如下：

點擊內(nèi)部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發(fā)外層view的tap事件處理函數(shù)。

• e.target指向的是觸發(fā)事件的源頭組件，因此，etarget是內(nèi)部的按鈕組件
• e.currentTarget指向的是當前正在觸發(fā)事件的那個組件，因此，e.currentTarget是當前的視圖組件

5.bindtap的語法格式

在小程序中，不存在HTML中的點擊鼠標點擊事件，而是通過點擊事件來響應用戶的觸摸行為。

• 通過綁定，可以為組件綁定點擊觸摸事件，語法如下：

<button type=“primary” bindtap=“btnTapHandler”>按鈕</button>

• 在頁面的.js文件中定義對應的事件處理函數(shù)，事件參數(shù)通過形參event(一般簡寫成e)來接收：

Page({
    btnTapHandler(e){//按鈕的tap事件函數(shù)
        console.log(e)//輸出事件形參對象e
    }
})

6.在事件處理函數(shù)中為data中的數(shù)據(jù)賦值

通過調(diào)用**this.setData(dataObject)**方法，可以給頁面data中的數(shù)據(jù)重新賦值，示例如下：

Page({
    data:{
        count:0
    },
    changeCount(){
        this.setDate({
            count:this.data.count + 1
        })
    }
})

7.事件傳參

可以為組件提供**data-***自定義屬性傳參，其中*代表的是參數(shù)的名字，示例代碼如下：

1<button type = "primary" bindtap=“btnHandler” data-info=“{{2}}”>事件傳參</button>

最終：info會被解析為參數(shù)的名字、數(shù)值2會被解析為參數(shù)的值

在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名即可獲取到具體參數(shù)的值，示例代碼如下：

btnHandler(event){//dataset是一個對象，包含了所有通過數(shù)據(jù)-*傳遞過來的參數(shù)項
    console.log(event.target.dataset)//通過DataSet可以訪問到具體參數(shù)的值
    console.log(event.target.datset.info)//所傳參數(shù)
}

8.bindinput的語法格式

在小程序中，通過input事件來響應文本框的輸入事件，語法格式如下：

• 通過bindinput，可以為文本框綁定輸入事件：

<input bindinput=“inputHandler”><Input>

• 在頁面的.js文件中定義事件處理函數(shù)：

inputHandler(e){//e.detail.value是變化后，文本框的最新值
	console.log(e.detail.value)
}

9.實現(xiàn)文本框和data之間的數(shù)據(jù)同步

實現(xiàn)步驟：

• 定義數(shù)據(jù)：data:{ msg:‘您好’}
• 渲染結(jié)構(gòu)：<input value=“{{msg}}” bindinput=“iptHandler”></input>
• 美化樣式 input{border：1px solid #333;padding:3px;margin:3px;border-redius:5px;}
• 綁定input事件處理函數(shù):

iptHandler(e){//文本框內(nèi)容改變事件
    this.setData({
        msg:e.detail.value//獲取文本框最新的值
    })
}

條件渲染

1.wx:if

在小程序中，使用**wx:if=“{{條件}}”**來判斷是否需要渲染該代碼塊：

<view WX:if=“{{條件}”>True</view>

也可以用wx:elif和wx:else來添加else判斷：

<view wx:if=“{{type===1}}”>男</view>
<view wx:elif=“{{type===2}}”>女</view>
<view wx:else>保密</view>

2.結(jié)合<block>使用wx:if

如果要一次性控制多個組件的展示與隱藏，可以使用一個<block></block>標簽將多個組件包裝起來，并在<block>標簽上使用wx:if控制屬性，示例如下：

<block wx:of="{{true}}">
	<view>view1</view>
    <view>view1</view>
</block>

注意：<block>并不是一個組件，它只是一個包裹性質(zhì)的容器，不會在頁面中做任何渲染。只起到包裹作用。

3.hidden

在小程序中，直接使用hidden="{{condition }}"也能控制元素的顯示與隱藏：

1 <view hidden="i{ condition }}">條件為 true隱藏，條件為 false顯示</view>

4.wx:if與hidden的對比

• 運行方式不同
  wx:if以動態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏
  hidden以切換樣式的方式(display：none/block；)，控制元素的顯示與隱藏
  心

• 使用建議
  頻繁切換時，建議使用hidden
  控制條件復雜時，建議使用wx:if搭配wx:elif、wx:else搭配進行展示與隱藏的切換

列表渲染

1.wx:for

通過wx:for可以根據(jù)指定的數(shù)組，循環(huán)渲染重復的組件結(jié)構(gòu)，語法示例如下：

<view wx:for="{{array}}">
	索引是：{{index}}當前項是：{{item}}
</view>

默認情況下，當前循環(huán)項的索引用index表示；當前循環(huán)項用item表示。

2.手動指定索引和當前項的變量名*

• 使用wx:for-index可以指定當前循環(huán)項的索引的變量名
• 使用wx:for-tem可以指定當前項的變量名

示例代碼如下：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
	索引是：{{idx}}當前項是：{{itemName}}
</view>

3.wx:key的使用

類似于Vue列表渲染中的:Key，小程序在實現(xiàn)列表渲染時，也建議為渲染出來的列表項指定唯一的Key值.從而提高渲染的效率，示例代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-487088.html

userList:[{id: 1,name: '小紅’},{ id: 2,name: '小黃’}，{id: 3,name: ‘小白'}//data中
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>//在wxml中

到了這里，關于使用微信開發(fā)工具開發(fā)微信小程序（二）——協(xié)同工作、發(fā)布與事件綁定的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！