一、環(huán)境配置

首先，制作微信小程序需要到官網(wǎng)注冊(cè)賬號(hào)并且下載微信開發(fā)者工具。
在官網(wǎng)完善小程序的信息，即可得到小程序AppID。在使用小程序·云開發(fā)需要使用此AppID。

打開新建的小程序，可以看到以下目錄

在components文件夾下可以存放很多從github上下載的插件，比如日歷插件等等。
pages下的index/是我們這個(gè)小程序的默認(rèn)的主頁(yè)，一般初始化的小程序云開發(fā)index有獲取openid和前端操作數(shù)據(jù)庫(kù)的方法。

二、實(shí)例演示

以做一個(gè)手賬小程序?yàn)槔?#xff1a;

1.跳轉(zhuǎn)頁(yè)面

簡(jiǎn)單的手賬要有主界面和一個(gè)添加事件的界面。
這兩個(gè)頁(yè)面的跳轉(zhuǎn)需要用到(Object object)和(Object object)兩個(gè)函數(shù)，實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)和返回，這兩個(gè)函數(shù)一般放在onLoad當(dāng)中，

onLoad: function (options) {bindViewTap: function() {({//保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。小程序中頁(yè)面棧最多十層。url: '../../..'})},/*bindViewTap: function() {({//關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過 getCurrentPages 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。delta: 2//返回兩層})},*/},

2.上傳圖片、圖片預(yù)覽、刪除圖片

上傳圖片

手賬小程序當(dāng)然也要有記錄圖片和文字的功能，這里先說(shuō)一下上傳圖片的功能。
首先，通過小程序·云開發(fā)的index界面我們不難發(fā)現(xiàn)有一個(gè)上傳圖片的功能，為了方便寫出預(yù)覽和刪除圖片的功能，這里先對(duì)上傳圖片的代碼做一些解釋：

// 上傳圖片doUpload: function () {// 選擇圖片({count: 1,//一次性上傳的圖片的數(shù)量sizeType: ['compressed'],//指定是原圖還是縮略圖，這里是縮略圖，默認(rèn)兩者都有sourceType: ['album', 'camera'],//從相機(jī)或者圖庫(kù)獲取圖片，默認(rèn)兩者都有success: function (res) {//接口調(diào)用成功執(zhí)行的函數(shù)//顯示加載提示框({title: '上傳中',})//const filePath = [0]//獲取上傳的圖片路徑，這里是選擇圖片返回的臨時(shí)地址// 上傳圖片const cloudPath = 'my-image' + (/\.[^.]+?$/)[0]//正則表達(dá)式獲取文件擴(kuò)展名({cloudPath,//云服務(wù)器路徑filePath,//圖片路徑success: res => {('[上傳文件] 成功：', res)//在控制臺(tái)返回文件上傳成功的信息，可以用于后期在調(diào)試器的Console中調(diào)試//獲取圖片的文件ID和云文件路徑app.globalData.fileID = res.fileIDapp.globalData.cloudPath = cloudPathapp.globalData.imagePath = filePath({//跳轉(zhuǎn)到頁(yè)面，用于圖片預(yù)覽等等url: '../storageConsole/storageConsole'})},fail: e => {//在控制臺(tái)返回上傳失敗的信息('[上傳文件] 失敗：', e)({icon: 'none',title: '上傳失敗',})},complete: () => {()//(Object object)用于隱藏 loading 提示框} })},fail: e => {(e)//向調(diào)試面板中打印 error 日志}})},

圖片預(yù)覽

在上傳圖片的當(dāng)前頁(yè)面進(jìn)行圖片預(yù)覽，暫時(shí)不需要調(diào)用數(shù)據(jù)庫(kù)里的圖片，廢話不多說(shuō)，直接上代碼解析吧

.js

//.jspreviewImage: function(e){({current: e.currentTarget.id, // 當(dāng)前顯示圖片的http鏈接urls: this.data.files // 需要預(yù)覽的圖片http鏈接列表})}

.wxml

//.wxml<view class="container"><block wx:for="{{files}}" wx:key="*this"><!--循環(huán)遍歷，顯示出全部的預(yù)覽圖片--><view class="list-item" bindtap="previewImage"><!--點(diǎn)擊觸發(fā)previewImage的函數(shù)--><image class="image1" src="{{item}}"mode="aspectFill" >//<icon type='cancel' class="image_remove" catchtap="removeImage"></icon></image></view></block></view>

刪除圖片

.js

//刪除removeImage(e) {var files = this.data.files;var index = e.currentTarget.dataset.index;files.splice(index, 1);//splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。({files: files//替換改變后的圖片組});},

currentTarget是事件綁定的當(dāng)前組件。
dataset在組件節(jié)點(diǎn)中可以附加一些自定義數(shù)據(jù)。這樣，在事件中可以獲取這些自定義的節(jié)點(diǎn)數(shù)據(jù)，用于事件的邏輯處理。
setData函數(shù)主要用于將邏輯層數(shù)據(jù)發(fā)送到視圖層

.html

<icon type='cancel' class="image_remove" catchtap="removeImage"></icon>

bindtap和 catchtap都屬于點(diǎn)擊事件，綁定之后，點(diǎn)擊組件是可以觸發(fā)這個(gè)函數(shù)的。
而bindtap在子元素綁定事件后，執(zhí)行的時(shí)候會(huì)觸發(fā)父元素上綁定的bingtap事件，catchtap則不會(huì)冒泡到父元素上。

總結(jié)

以上是生活随笔為你收集整理的idea shell 中的函数 跳转_关于初次写微信小程序的注意事项（以简单的日历手账为实例） - 幻术是中二的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。