running小程序重要技術流程文檔

一、項目文件說明:

(注:getMyMoney無用已刪除)
在這里插入圖片描述

二、重要文件介紹

1.reinfo.js:位于utils文件下,該文件封裝有統一的請求URL,和請求API同意封裝供頁面調用;調用時候需要在頁面上先引入該文件,如下(index/index.js為例):

//先引入
import API from "../../utils/reinfo.js";// 后使用的時候如下
wx.request({url: API.getSysConfig,//這里的API就是上面引入時候的名字,getSysConfig就是我們reinfo.js文件里封裝的method:"get",success: function (res) {// 調用接口成功后執行的}
})

2.app.js:這個是小程序的啟動文件,每次小程序啟動的話,必定會執行這個文件里的方法。

//onLaunch 小程序生命周期,啟動就會執行
onLaunch: function () {var that=this;// 展示本地存儲能力var openId = wx.getStorageSync('openId') || null// 獲取用戶openid、使用 Promise // 這里的獲取用戶openid使用Promise 因為需要讓index.js可以調用他來獲取openid,因為index作為第一個小程序頁面,也具有優先執行權,有時候會在app.js執行之前先執行,有時候會在app.js執行之后執行,所以這里使用Promise做一個異步請求,來供index.js頁面調用回調獲取用戶數據const getUserOpenId = new Promise((resolve, reject) => {if(openId){console.log('緩存openid',openId)resolve(openId); // resolve Promise}else{// 登錄code獲取openidwx.login({success: function (res) {var code = res.code;//發送給服務器的codeif (code) {wx.request({url: API.getSessinOpenid,method:"post",data: {code: code,},header: {'content-tpe': 'application/json'},success: function (res) {console.log('獲取到的用戶openid為:',res)//可以把openid保存到本地緩存,方便以后調用wx.setStorageSync('openId', res.data.data);// that.getUserInfoFun(res.data.data)resolve(res.data.data); // resolve Promise},fail:function(res){reject(err); // reject Promiseconsole.log(res)}})}else {console.log("獲取用戶登錄態失敗!");}},fail: function (error) {}})}});// 將 Promise 對象存儲到全局數據對象中this.globalData.getUserOpenId = getUserOpenId;//  獲取用戶信息//這個獲取用戶信息同上意思const getUserInfo = new Promise((resolve, reject) => {wx.request({url: API.getUserInfo,method:"post",data: {openId: wx.getStorageSync('openId') || null,},success: function (res) {console.log('openid獲取用戶信息:',res)wx.setStorageSync('userInfo', res.data.data);resolve(res.data.data); // resolve Promise}})})// 將 Promise 對象存儲到全局數據對象中this.globalData.getUserInfo = getUserInfo;},

這個頁面底部有個changeTabBar方法這個是自定義底部導航組件用來切換頁面的公共方法
小程序組件的使用方法如下:
1.封裝組件如comment\tabbar\tabbar.wxml這里就是封裝了一個底部導航組件:
在這里插入圖片描述
其他需要使用的頁面進行引入(index/index):
wxml:


<import src="../../comment/tabbar/tabbar.wxml" />
<template is="tabbar" data="{{tabbar}}"/>

js:

//獲取應用實例
const app = getApp();
Page({
/*** 頁面的初始數據*/data: {//底部導航欄tabbar: {},},//在onshow或者onload調用app下的changeTabBar方法來進行點擊切換頁面onload(){//調用app中的函數app.changeTabBar(); } 
})

3.postOrder:發布訂單是一個大麻煩:這里需要使用一個點擊切換和滑動切換(同用戶訂單列表頁和跑腿訂單列表頁)。
wxml:

<view class="navbar"><text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>

js:

/*** 頁面的初始數據*/
data: {navbar: ['幫我買', '幫我送', '幫我取'],currentTab: 0,
}//電機頭部切換barnavbarTap: function (e) {console.log( e.currentTarget.dataset.idx)let initPrice = app.globalData.sysConfig.minDeliveryPrice// 切換的時候需要將數據清空,讓用戶重新輸入let postData = {"commodity": "","commodityCost": 0,"commodityWeight": 1,"deliveryAddress": "","deliveryConcat": "","deliveryPhone": "","deliveryTime": "","openId": "","orderType": e.currentTarget.dataset.idx*1,"pickUpAddress": "","pickUpContact": "","pickUpPhone": "","pickUpTime": "","remark": "","tipCost": 0,"totalCost": 0}// 設置取貨時間、配送時間postData.deliveryTime = this.calculateFutureTime()if(postData.orderType == 1||postData.orderType == 2){postData.pickUpTime = this.calculateFutureTime()}var userInfo = wx.getStorageSync('userInfo') || {}postData.deliveryPhone = userInfo.phone// postData.orderType = e.currentTarget.dataset.idxthis.setData({currentTab: e.currentTarget.dataset.idx,postData,multiIndex1: [0, 0], // 默認選擇當天和第一個時間段multiIndex2: [0, 0], // 默認選擇當天和第一個時間段multiIndex3: [0, 0], // 默認選擇當天和第一個時間段multiIndex4: [0, 0], // 默認選擇當天和第一個時間段price: initPrice})//全局變量app.globalData.currentTab = e.currentTarget.dataset.idx;},// 輪播切換,即左右滑動切換swiperChange: function (e) {let initPrice = app.globalData.sysConfig.minDeliveryPrice// 切換類型的話清空let postData = {"commodity": "","commodityCost": 0,"commodityWeight": 1,"deliveryAddress": "","deliveryConcat": "","deliveryPhone": "","deliveryTime": "","openId": "","orderType": e.detail.current*1,"pickUpAddress": "","pickUpContact": "","pickUpPhone": "","pickUpTime": "","remark": "","tipCost": 0,"totalCost": 0}// 設置取貨時間、配送時間postData.deliveryTime = this.calculateFutureTime()if(postData.orderType == 1||postData.orderType == 2){postData.pickUpTime = this.calculateFutureTime()}var userInfo = wx.getStorageSync('userInfo') || {}postData.deliveryPhone = userInfo.phonethis.setData({currentTab: e.detail.current,postData,multiIndex1: [0, 0], // 默認選擇當天和第一個時間段multiIndex2: [0, 0], // 默認選擇當天和第一個時間段multiIndex3: [0, 0], // 默認選擇當天和第一個時間段multiIndex4: [0, 0], // 默認選擇當天和第一個時間段price: initPrice})//全局變量app.globalData.postOrderCurrentTab = e.detail.current;},

來實現頂部以及點擊切換:在這里插入圖片描述
配送時間的選擇,進行一個立即配送和之后的每隔30分鐘可供選擇,有當天和次日,
在這里插入圖片描述
wxml:

<view class="v1-item"><view>預計送達時間</view><picker mode="multiSelector" bindcolumnchange="bindMultiPickerColumnChange" range="{{[dateRange, timeRange]}}" value="{{multiIndex1}}" data-id="1" bindchange="bindMultiPickerChange"><view class="picker">{{dateRange[multiIndex1[0]]}} {{timeRange[multiIndex1[1]]}}</view></picker>
</view>

js:

data:{dateRange: ['今天', '明天'],timeRange: [], // 存儲時間段的數組multiIndex1: [0, 0], // 默認選擇當天和第一個時間段  幫我買:預計送達時間multiIndex2: [0, 0], // 默認選擇當天和第一個時間段  幫我送:預計取貨時間multiIndex3: [0, 0], // 默認選擇當天和第一個時間段  幫我送:預計送達時間multiIndex4: [0, 0], // 默認選擇當天和第一個時間段  幫我取:預計送達時間
}// 配送時間選擇列表發生改變時候監聽bindMultiPickerColumnChange(e){console.log('修改的列為', e.detail.column, ',值為', e.detail.value,e);if(e.detail.column == 0 && e.detail.value == 1){var startOfDay = new Date();startOfDay.setHours(0, 0, 0, 0);dayType = 1this.generateTimeRange(startOfDay)}else if(e.detail.column == 0 && e.detail.value == 0){dayType = 0this.generateTimeRange(new Date())}},// 計算時間選擇列表generateTimeRange: function(now) {// var now = new Date();var hours = now.getHours();var minutes = now.getMinutes();var timeRange = [];// 生成時間段,每半個小時為一個時間段,共24小時for (var i = 0; i < 48; i++) {var hour = Math.floor(i / 2);var minute = (i % 2) * 30;// 格式化時間,補零操作var hourStr = hour < 10 ? '0' + hour : '' + hour;var minuteStr = minute === 0 ? '00' : '' + minute;if (hour > hours || (hour == hours && minute >= minutes)) {timeRange.push(hourStr + ':' + minuteStr);}}if(dayType == 0){timeRange[0] = '立即配送'}this.setData({timeRange: timeRange});},// 根據當前時間自動計算30分鐘后的時間,并在遇到23:40時能正確計算到次日calculateFutureTime() {var currentDate = new Date();var futureDate = new Date(currentDate.getTime() + 30 * 60000); // 加上30分鐘的毫秒數// 如果超過了當天的23:59:59,就設置到次日的00:30if (futureDate.getDate() > currentDate.getDate()) {futureDate = new Date(futureDate.getFullYear(), futureDate.getMonth(), futureDate.getDate(), 0, 30, 0);var originalDate = new Date(futureDate);var hour = originalDate.getHours()<10?'0'+originalDate.getHours():originalDate.getHours();// var minute = originalDate.getMinutes();var minute = originalDate.getMinutes()<10?'0'+originalDate.getMinutes():originalDate.getMinutes();var formattedTime = hour + ':' + minute;// var formattedTime = hour<10?0+hour:hour + ':' + minute;console.log("當前時間0000:" , currentDate);console.log("30分鐘后的時間000:" , futureDate,formattedTime);return '次日 '+formattedTime;}var originalDate = new Date(futureDate);var hour = originalDate.getHours()<10?'0'+originalDate.getHours():originalDate.getHours();var minute = originalDate.getMinutes()<10?'0'+originalDate.getMinutes():originalDate.getMinutes();// var minute = originalDate.getMinutes();var formattedTime = hour + ':' + minute;// var formattedTime = hour<10?0+hour:hour + ':' + minute;console.log("當前時間111:" , currentDate);console.log("30分鐘后的時間1111:" , futureDate,formattedTime);return '今天 '+formattedTime;},// 選擇bindMultiPickerChange: function(e) {console.log('選擇',e)let postData = this.data.postDatalet type = e.currentTarget.dataset.idconsole.log('這樣可以嗎?',this.data['multiIndex'+type])// 如果是立即配送自動匹配現在的30分鐘后if(this.data.timeRange[e.detail.value[1]] == '立即配送'){postData.deliveryTime = this.calculateFutureTime()}if(type == 1){postData.deliveryTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}if(type == 2){postData.pickUpTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}if(type == 3){postData.deliveryTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}if(type == 4){postData.deliveryTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}this.setData({['multiIndex'+type]: e.detail.value,postData,});console.log('結果》》》?',this.data['multiIndex'+type])},

圖片上傳列表
wxml:

<view class="v1"><!-- 圖片列表 --><view class="image-list"><block wx:for="{{images}}" wx:key="index"><view class="image-item"><image src="{{item}}" mode="aspectFill" data-src="{{item}}" bindtap="previewImage"></image><view class="delete-btn" bindtap="deleteImage" data-index="{{index}}">×</view></view></block><!-- 添加圖片按鈕 --><view class="add-image" bindtap="chooseImage"><text>+</text></view></view></view>

js:

data:{images: [], // 存儲已選擇的圖片列表
}// 選擇圖片chooseImage() {let that = this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {console.log('選擇圖片',res)wx.uploadFile({url: API.uploadImg,filePath: res.tempFilePaths[0],name: 'file',header: {"Content-Type": "multipart/form-data"},formData: {'type': 4 //1-表示頭像,2-表示身份證,4-訂單圖片},success (resFile){let fileData = JSON.parse(resFile.data)console.log("文件上傳接口",JSON.parse(resFile.data))if(fileData.code == 0){// 上傳成功時候插入原有的數據中const newImages = that.data.images.concat(fileData.data);that.setData({images: newImages,});}else{wx.showToast({title: fileData.msg,icon: 'error'})}}})},});},// 預覽圖片previewImage(e) {const current = e.target.dataset.src;wx.previewImage({current: current,urls: this.data.images,});},// 刪除圖片deleteImage(e) {const index = e.target.dataset.index;const newImages = this.data.images;// 刪除指定位置index的圖片newImages.splice(index, 1);this.setData({images: newImages,});},

4.index:搶單大廳樣式

//<!-- class使用三元運算符,動態設置class名稱,用遍歷數據,判斷奇偶數來實現左右不同樣式 -->
<view class="{{index%2 == 0?'v2-body-v1':'v2-body-v2'}}" wx:for="{{orderHallList}}"  bindtap="gotoOrderDetail" data-paymentStatus="{{item.paymentStatus}}" data-orderStatus="{{item.orderStatus}}" data-id="{{item.id}}" data-type="orderHall"><view class="{{index%2 == 0?'v2-body-v1-price':'v2-body-v2-price'}}">{{item.totalCost}}</view><view class="{{index%2 == 0?'v2-body-v1-text':'v2-body-v2-text'}}"><image src="{{index%2 == 0?'/images/zuo.png':'/images/you.png'}}"></image><text>{{item.orderType == 'BUY'?'幫我買':item.orderType == 'SEND'?'幫我送':item.orderType == 'TAKE'?'幫我取':''}}</text></view><view class="{{index%2 == 0?'v2-body-v1-img':'v2-body-v2-img'}}"><view>{{item.deliveryAddress}}</view><view>{{item.deliveryTime}}</view></view>
</view>

5.訂單完成的評價打分
wxml:

<view class="v1-item">// <!-- 星星打分實現 --><view style="width: 100%;line-height: 60rpx;"><view style="width: unset;margin-left: unset;" class='starLen' bindtap="myStarChoose"><block wx:for="{{starMap}}"><image wx:if="{{star>=index+1}}" class='star' data-star="{{index+1}}" src="../../images/start-2.png" /> <image wx:if="{{star<index+1}}" class='star' data-star="{{index+1}}" src="../../images/start-1.png" />    </block></view><view class="scoreContent" style="width: unset;margin-left: unset;">{{starMap[star-1]}}</view></view></view>

js:

/*** 頁面的初始數據*/data: {star: 0,  //默認0分starMap: ['非常差','差','一般','好','非常好',],},// 選星myStarChoose(e) {let star = parseInt(e.target.dataset.star) || 0;// 獲取打的分this.setData({star: star,});},

這里列舉這幾個比較難的流程,如果后面對哪些模塊的流程有不明白的可以再提出來

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/208852.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/208852.shtml
英文地址,請注明出處:http://en.pswp.cn/news/208852.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【C語言】操作符詳解(一):進制轉換,原碼,反碼,補碼

目錄 操作符分類 2進制和進制轉換 2進制轉10進制 10進制轉2進制 2進制轉8進制和16進制 2進制轉8進制 2進制轉16進制 原碼、反碼、補碼 操作符分類 操作符中有一些操作符和二進制有關系&#xff0c;我們先鋪墊一下二進制的和進制轉換的知識。 2進制和進制轉換 其實我們經…

數據結構準備知識

struct&#xff08;結構體&#xff09; struct&#xff0c;或稱為結構體&#xff0c;是C語言中一種復合數據類型&#xff0c;它允許你將多個不同類型的數據項組合成一個單一的單位。這對于創建記錄或更復雜的數據結構非常有用。 結構體的定義語法如下&#xff1a; struct 結…

vertica主鍵列能插入重復值的處理辦法

問題描述 開發同事反饋在vertica中創建含主鍵列的表中插入重復數據時沒有進行校驗&#xff0c;插入重復值成功。經過測試著實可以插入重復值&#xff0c;這個坑有些不一樣。 創建表和插入語句如下&#xff1a; --創建表 CREATE TABLE dhhtest(ID VARCHAR(64) PRIMARY KEY );…

postgresql數據庫配置主從并配置ssl加密

1、先將postgresql數據庫主從配置好 參考&#xff1a;postgresql主從配置 2、在主節點配置ssl加密&#xff0c;使用navicat測試是否可以連接 參考&#xff1a;postgresql配置ssl 3、正常連接無誤后&#xff0c;將root.crt、server.crt、server.key復制到從數據庫節點的存儲…

使用Microsoft Dynamics AX 2012 - 5. 生產控制

生產控制的主要職責是生產成品。為了完成這項任務&#xff0c;制造業需要消耗物品和資源能力&#xff08;人員和機械&#xff09;。制造過程可能包括半成品的生產和庫存。半成品是指物品包括在成品材料清單中。 制造業的業務流程 根據公司的要求&#xff0c;您可以選擇申請Dy…

某馬點評——day04

達人探店 發布探店筆記 改一下&#xff0c;圖片保存路徑就可以直接運行測試了。 查看探店筆記 Service public class BlogServiceImpl extends ServiceImpl<BlogMapper, Blog> implements IBlogService {Resourceprivate IUserService userService;Overridepublic Resu…

OpenCL學習筆記(二)手動編譯開發庫(win10+vs2019)

前言 有時需求比較特別&#xff0c;可能需要重新編譯opencl的sdk庫。本文檔簡單記錄下win10下&#xff0c;使用vs2019編譯的過程&#xff0c;有需要的小伙伴可以參考下 一、獲取源碼 項目地址&#xff1a;GitHub - KhronosGroup/OpenCL-SDK: OpenCL SDK 可以直接使用git命令…

一篇文章了解指針變量

字符指針變量 在指針的類型中我們知道有一種指針叫做字符指針 它的使用情況如下&#xff1a; #include<stdio.h> int main() {char pa w;char*p1&pa;*p1 a;printf("%c\n", *p1);return 0; } 在這段代碼當中&#xff0c;我們將‘w’字符的地址傳到了p…

vue3 自己寫一個月的日歷

效果圖 代碼 <template><div class"monthPage"><div class"calendar" v-loading"loading"><!-- 星期 --><div class"weekBox"><div v-for"(item, index) in dayArr" :key"index&q…

2.修改列名與列的數據類型

修改字段名與字段數據類型 1.修改字段名 有時&#xff0c;在我們建好一張表后會突然發現&#xff0c;哎呀&#xff01;字段名貌似寫錯了&#xff01;怎么辦&#xff1f;要刪了表再重新建一個新表嗎&#xff1f;還是要刪了這個字段再新建一個新的字段&#xff1f; 都不用&…

AIGC專題報告:生成式人工智能人人可用的新時代

今天分享的AIGC系列深度研究報告&#xff1a;《AIGC專題報告&#xff1a;生成式人工智能人人可用的新時代》。 &#xff08;報告出品方&#xff1a;埃森哲&#xff09; 報告共計&#xff1a;21頁 人工智能發展迎來新拐點 ChatGPT 正在喚醒全球對人工智能&#xff08;AI&…

蛇形矩陣

蛇形矩陣是由1開始的自然數依次排列成的一個矩陣上三角形。 例如&#xff0c;當輸入5時&#xff0c;應該輸出的三角形為&#xff1a; 1 3 6 10 15 2 5 9 14 4 8 13 7 12 11 輸入描述&#xff1a;輸入正整數N&#xff08;N不大于100&#xff09; 輸出描述&#xff1a;輸出一個N…

MySQL七 | 存儲引擎

目錄 存儲引擎 存儲引擎特點 存儲引擎選擇 Innodb與MyISAM區別 存儲引擎 默認存儲引擎:InnoDB show engines;#展示當前數據庫支持的存儲引擎 存儲引擎特點 特點InnoDBMyISAMMemory存儲限制64TB有有事務安全支持--鎖機制行鎖表鎖表鎖Btree鎖支持支持 支持 Hash索引--支…

在pom.xml中添加maven依賴,但是類里面import導入的時候報錯

問題&#xff1a; Error:(27, 8) java: 類TestKuDo是公共的, 應在名為 TestKuDo.java 的文件中聲明 Error:(7, 23) java: 程序包org.apache.kudu不存在 Error:(8, 23) java: 程序包org.apache.kudu不存在 Error:(9, 23) java: 程序包org.apache.kudu不存在 Error:(10, 30) jav…

【場景測試用例】上傳文件

測試思路&#xff1a; 功能 上傳符合需求給的文件格式&#xff0c;大小&#xff0c;寬高等可以正常上傳 不同的文件格式最大/最小/中間的文件大小如支持批量上傳可以正常上傳 邊界值如支持刪除可以正常刪除指定文件&#xff0c;其他文件不受影響如支持預覽&#xff0c;可以正常…

【Java探索之旅】我與Java的初相識(一):Java的特性與優點及其發展史

&#x1f3a5; 嶼小夏 &#xff1a; 個人主頁 &#x1f525;個人專欄 &#xff1a; Java入門到精通 &#x1f304; 莫道桑榆晚&#xff0c;為霞尚滿天&#xff01; 文章目錄 一. Java語言概述與優勢1.1 Java的概述1.2 Java語言的優勢 二. Java領域與發展史2.1 Java的使用領域2.…

面試多線程八股文十問十答第二期

面試多線程八股文十問十答第二期 作者&#xff1a;程序員小白條&#xff0c;個人博客 相信看了本文后&#xff0c;對你的面試是有一定幫助的&#xff01; ?點贊?收藏?不迷路&#xff01;? 1.進程和線程的區別 概念不同&#xff1a;進程是操作系統中的一個獨立執行單元&a…

LeetCode56. Merge Intervals

文章目錄 一、題目二、題解 一、題目 Given an array of intervals where intervals[i] [starti, endi], merge all overlapping intervals, and return an array of the non-overlapping intervals that cover all the intervals in the input. Example 1: Input: interva…

目標檢測mAP計算以及coco評價標準

這篇是我對嗶哩嗶哩up主 霹靂吧啦Wz 的視頻的文字版學習筆記 感謝他對知識的分享 講一下目標檢測中的一些常見的指標 在我們使用目標檢測網絡訓練時 最后在驗證集上會得到一個coco的評價列表 就像我們圖中給的這一系列參數列表一樣 我們再進一步引入兩個概念 第一個叫做precisi…

P1 Qt的認識及環境配置

目錄 前言 01 下載Qt Creator windows下載安裝包拷貝到Linux Linux直接下載 02 Linux 安裝Qt 前言 &#x1f3ac; 個人主頁&#xff1a;ChenPi &#x1f43b;推薦專欄1: 《C_ChenPi的博客-CSDN博客》??? &#x1f525; 推薦專欄2: 《Linux C應用編程&#xff08;概念類…