一、環境配置

首先，制作微信小程序需要到官網注冊賬號并且下載微信開發者工具。
在官網完善小程序的信息，即可得到小程序AppID。在使用小程序·云開發需要使用此AppID。

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

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

二、實例演示

以做一個手賬小程序為例：

1.跳轉頁面

簡單的手賬要有主界面和一個添加事件的界面。
這兩個頁面的跳轉需要用到(Object object)和(Object object)兩個函數，實現頁面的跳轉和返回，這兩個函數一般放在onLoad當中，

onLoad: function (options) {bindViewTap: function() {({//保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。小程序中頁面棧最多十層。url: '../../..'})},/*bindViewTap: function() {({//關閉當前頁面，返回上一頁面或多級頁面?？赏ㄟ^ getCurrentPages 獲取當前的頁面棧，決定需要返回幾層。delta: 2//返回兩層})},*/},

2.上傳圖片、圖片預覽、刪除圖片

上傳圖片

手賬小程序當然也要有記錄圖片和文字的功能，這里先說一下上傳圖片的功能。
首先，通過小程序·云開發的index界面我們不難發現有一個上傳圖片的功能，為了方便寫出預覽和刪除圖片的功能，這里先對上傳圖片的代碼做一些解釋：

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

圖片預覽

在上傳圖片的當前頁面進行圖片預覽，暫時不需要調用數據庫里的圖片，廢話不多說，直接上代碼解析吧

.js

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

.wxml

//.wxml<view class="container"><block wx:for="{{files}}" wx:key="*this"><!--循環遍歷，顯示出全部的預覽圖片--><view class="list-item" bindtap="previewImage"><!--點擊觸發previewImage的函數--><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() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。({files: files//替換改變后的圖片組});},

currentTarget是事件綁定的當前組件。
dataset在組件節點中可以附加一些自定義數據。這樣，在事件中可以獲取這些自定義的節點數據，用于事件的邏輯處理。
setData函數主要用于將邏輯層數據發送到視圖層

.html

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

bindtap和 catchtap都屬于點擊事件，綁定之后，點擊組件是可以觸發這個函數的。
而bindtap在子元素綁定事件后，執行的時候會觸發父元素上綁定的bingtap事件，catchtap則不會冒泡到父元素上。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。