資訊專(zhuān)欄INFORMATION COLUMN
| ????開(kāi)講啦?。。?！????蘇州程序大白???? |
| ????開(kāi)講啦?。。?！????蘇州程序大白???? |
? 個(gè)人主頁(yè):蘇州程序大白
?作者介紹：中國(guó)DBA聯(lián)盟(ACDU)成員，CSDN全國(guó)各地程序猿（媛）聚集地管理員。目前從事工業(yè)自動(dòng)化軟件開(kāi)發(fā)工作。擅長(zhǎng)C#、Java、機(jī)器視覺(jué)、底層算法等語(yǔ)言。2019年成立柒月軟件工作室。
?如果文章對(duì)你有幫助，歡迎關(guān)注、點(diǎn)贊、收藏（一鍵三連）和C#、Halcon、python+opencv、VUE、各大公司面試等一些訂閱專(zhuān)欄哦
? 有任何問(wèn)題歡迎私信，看到會(huì)及時(shí)回復(fù)
? 微信號(hào)：stbsl6，微信公眾號(hào)：蘇州程序大白
? 想加入技術(shù)交流群的可以加我好友，群里會(huì)分享學(xué)習(xí)資料
1、方便快捷：與其他購(gòu)物平臺(tái)的APP、網(wǎng)站相比，小程序有一個(gè)很大的優(yōu)勢(shì)——方便快捷。例如在使用其他購(gòu)物平臺(tái)的APP時(shí)，不僅需要下載、安裝，而且還需要注冊(cè)、登陸，操作步驟繁瑣。即使不使用APP，直接登錄購(gòu)物平臺(tái)的網(wǎng)站，也需要經(jīng)過(guò)注冊(cè)、登錄的環(huán)節(jié)。但微信小程序不同，由于小程序是依附在微信上面使用的，因此無(wú)需下載和安裝，此外，在登陸時(shí)，用戶還可以選擇在利用微信賬號(hào)來(lái)登錄小程序，一鍵登陸，操作簡(jiǎn)單、快捷。
2、入口眾多：小程序商城本身作為小程序的一個(gè)種類(lèi)，具有很多開(kāi)放入口，比如：附近的小程序、小程序碼、微信搜一搜、群分享、好友分享、公眾號(hào)關(guān)聯(lián)、推送等五十多個(gè)的入口。這些入口有助于企業(yè)更好的獲取流量，從而進(jìn)行轉(zhuǎn)化、變現(xiàn)。
3、微信助力：相信大家都知道，小程序商城是基于微信運(yùn)行的，這本身就是一個(gè)很大的優(yōu)勢(shì)。如果是運(yùn)營(yíng)一個(gè)購(gòu)物商城的網(wǎng)站或是APP，首先要做到的就是有用戶基數(shù)，而一個(gè)新平臺(tái)，獲取流量的難度是非常大的。但微信小程序，背靠微信，坐擁10億用戶，在這些用戶中，一定會(huì)有很多有相關(guān)需求的用戶。再加上附近的小程序、搜索發(fā)現(xiàn)小程序、公眾號(hào)關(guān)聯(lián)等，小程序可以非常輕松的獲取到大量流量。
4、場(chǎng)景營(yíng)銷(xiāo)：上述提到，小程序擁有很多的入口，其中包括線上入口和線下入口，而小程序商城主要作為購(gòu)物使用，所以，線下的入口很重要。小程序商城很多的使用頻率都是線下，再加上其擁有的營(yíng)銷(xiāo)屬性，使得很多的商家解決了很多業(yè)務(wù)上的難題，更是大大節(jié)省了人力、物力、財(cái)力等成本，很大的提升了店鋪的業(yè)務(wù)效率。
5、開(kāi)發(fā)成本低：企業(yè)進(jìn)行微信小程序開(kāi)發(fā)，既可以解決開(kāi)發(fā)成本問(wèn)題，又可以縮短開(kāi)發(fā)周期，并且還可以利用微信已存在的營(yíng)銷(xiāo)趨勢(shì)，用戶可以通過(guò)掃描二維碼進(jìn)入。
1、WXML WXSS JavaScript JSON。
2、page首頁(yè)log日志。
3、頂部標(biāo)題的顏色必須為block和white。
tabBar
表示地址的tab欄【官網(wǎng)地址】
注意事項(xiàng)
在使用bool類(lèi)型 充當(dāng)類(lèi)型屬性時(shí)，在屬性值的位置前面不能加空格。
列表循環(huán)` wx:for=”數(shù)組或者對(duì)象”。
只有一層循環(huán)時(shí)可以將一下省略。
列表循環(huán)wx:for-item="循環(huán)項(xiàng)的名稱(chēng)"wx:for-index=’index’`。
wx:key=”唯一的值”。
條件渲染wx:if wx:elif wx:else。
hidden 是添加樣式使用。
對(duì)象循環(huán) wx:for="{{對(duì)象/數(shù)組}}" wx:for-item="對(duì)象的值" wx:for-index="循環(huán)項(xiàng)目的屬性"。
<!--pages/demo/demo.wxml--><view>輪播圖</view><!-- image width 700px height 277px x/1 = 277/700 x=277/700--><swiper class="swiper" autoplay interval="1000" circular indicator-dots> <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/175759/5/697/309624/605fa953Eaddcc402/30b0ea12dc5cc42c.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item> <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/143564/28/18582/124317/60667523E2a4840dd/301bbb3de0243db8.jpg!q70.jpg.dpg" alt=""/></swiper-item> <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/155887/8/16711/104572/60534627Eb979dc75/cc416de39d2e83b0.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item></swiper><!-- 單選框 --><radio-group bindchange="bindChange"> <radio name="sex" value="male">男</radio> <radio name="sex" value="female">女</radio> <view wx:if="{{gerder == "male"}}">-您選擇的按鈕為男</view> <view wx:elif="{{gerder == "female"}}">-您選擇的按鈕為女</view> <view wx:else="{{gerder == ""}}">-您選擇的按鈕為</view></radio-group><!-- 復(fù)選框 --><view> <checkbox-group bindchange="bandelItemchange"> <checkbox wx:for="{{fruit}}" wx:key="id" value="{{item.value}}"> {{item.name}} </checkbox> <view>選中的是：{{checkList}}</view></checkbox-group></view><!-- 組件 --><Tabs></Tabs><rich-text class="" nodes="{{html}}"> </rich-text> <view>input標(biāo)簽</view><input type="text" bindinput="handleInput"/><view class="btn"> <button size="mini" bindtap="handeltap" data-opertation="1">+</button><button size="mini" bindtap="handeltap" data-opertation="{{-1}}">-</button></view><image mode="widthFix" src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/wallhaven-oxxw29.webp"></image><view>{{num}}</view><view>----------------------------</view><text>測(cè)試頁(yè)面</text><view>"text"相當(dāng)于web中的span元素，view相當(dāng)于web中的div標(biāo)簽塊級(jí)元素</view><view>測(cè)試wx:for標(biāo)簽</view><view>---------------------</view><view>列表循環(huán)</view><view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="username"> 屬性：{{item.id}} 索引: {{index}} 名稱(chēng)：{{item.name}} 年齡：{{item.age}} 年齡：{{item.msg.con}}</view><view>對(duì)象循環(huán)</view><view wx:for="{{msg}}" wx:for-item="value" wx:for-index="key" wx:key="id"> {{value}} {{key}}</view><view>---------------------</view><view>測(cè)試 wx:if</view><view wx:if="{{false}}">1</view><view wx:elif="{{false}}">2</view><view wx:elif="{{true}}">3</view><view>---------------------</view><view>測(cè)試 hidden</view><view hidden="{{true}}">1</view><view hidden>1</view>1、nput標(biāo)簽綁定input事件 使用bindinput屬性。
2、通過(guò)事件源對(duì)象來(lái)獲取input輸入的值 e.detail.value。
3、與data同級(jí) 并且可以將input中輸入的值與data中定義的屬性綁定，使用this.setData({屬性:e.detail.value})。
4、加入一個(gè)點(diǎn)擊事件 bindtap屬性，無(wú)法直接傳參 通過(guò)自定義屬性的方法來(lái)傳參。
在自定義屬性時(shí)要注意 如果傳遞的參數(shù)為數(shù)字，應(yīng)該加{{}}使得傳遞的參數(shù)為number，不加為string。
注意input輸入后的值為字符型，需要將輸入的值轉(zhuǎn)換。
1、比例尺的關(guān)系 1px =750rpx*設(shè)置的尺寸大小/page的寬度。
2、text 才能實(shí)現(xiàn)長(zhǎng)按復(fù)制selectable decode解碼和復(fù)制。
3、image中屬性mode aspectFit是長(zhǎng)邊能顯示出來(lái) aspecFill使得短邊顯示出來(lái) widthFix按照比例縮放。
4、圖片支持懶加載lazy-load 布爾值。
1、輪播項(xiàng)swiper-item標(biāo)簽里面放入圖片swiper 存在默認(rèn)高度 150px。
2、高度無(wú)法實(shí)現(xiàn)由內(nèi)容撐開(kāi)。
3、圖片使用mode=“widthFix”。
4、indicator-dots 顯示面板指示點(diǎn) indicator-color`` indicator-active-color。
5、autoplay自動(dòng)輪播 5秒一次。
6、interval可以切換時(shí)間間隔。
7、circular 是否循環(huán)輪播。
8、給圖片加100%寬度 ，swipter的高度自適應(yīng) 100vw * 圖片的寬度 / 高度。
navigator 導(dǎo)航
1、url 表示要跳轉(zhuǎn)的頁(yè)面路徑。
2、相當(dāng)于塊級(jí)元素。
3、target 跳轉(zhuǎn)小程序，默認(rèn)當(dāng)前小程序 可選值 self/minProgram。
4、open-type 跳轉(zhuǎn)方式。
rich-text 富文本標(biāo)簽
1、nodes 接受字符串。
2、對(duì)象數(shù)組。
button標(biāo)簽
1、size屬性 default/ mini。
2、open-type。
icon圖標(biāo)
1、type類(lèi)型。
2、size 大小 默認(rèn)23。
3、color 改變顏色。
radio/checkbox
radio-ground 綁定change事件 bindchange。
checkbox-ground綁定事件change。
1、在使用自定義組件時(shí) 要注意 在使用函數(shù)方法時(shí)要寫(xiě)到methods中。
2、并且將被使用的組件寫(xiě)到需要渲染頁(yè)面的json文件中。
3、父組件向子組件 傳遞數(shù)據(jù) 通過(guò)自定義屬性來(lái)傳遞properties要接受的數(shù)據(jù)名稱(chēng)· type/value·類(lèi)型和值。
4、子向父?jìng)鬟f this.triggerEvent("名稱(chēng)",傳遞的參數(shù)) 傳遞的時(shí)候要注意 傳遞的參數(shù)是什么形式，相對(duì)應(yīng)。
5、子傳父,在子中定義一個(gè)要傳遞的事件方法和參數(shù)，在父中對(duì)事件方法進(jìn)行綁定，然后在父中使用方法。
6、數(shù)據(jù)在誰(shuí)上，誰(shuí)有權(quán)修改。
handleitemtap(e){ // 將點(diǎn)擊的事件加入自定義屬性 // console.log(e); const {index} = e.currentTarget.dataset let {tabs} = this.data // console.log(index); // 對(duì)以上的導(dǎo)航數(shù)據(jù)使用foreach進(jìn)行遍歷 tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false) this.setData({ tabs }) }-------------------<view class="nav"> <view bindtap="handleitemtap" wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?"active":""}}" data-index="{{index}}">{{item.name}}</view></view>slot標(biāo)簽其實(shí)就是一個(gè)占位符，等到父組件調(diào)用子組件的時(shí)候，在傳遞標(biāo)簽。
// app.jsApp({ // 表示在應(yīng)用第一次啟用時(shí)就執(zhí)行 onLaunch(e){ console.log(e); console.log("launch"); // 不能觸發(fā) // wx.navigateTo({ // url: "url", // }) }, // 應(yīng)用被用戶看到時(shí)執(zhí)行 onShow(e){ // 對(duì)數(shù)據(jù)的重置 console.log("onshow"); }, // 應(yīng)用被隱藏的時(shí)候所執(zhí)行的 onHide(e){ // 清除定時(shí)器 console.log("onHide"); }, // 應(yīng)用發(fā)生錯(cuò)誤時(shí)執(zhí)行 onError(err){ console.log("onError"); // console.log(err); }, // 應(yīng)用找不到頁(yè)面時(shí)觸發(fā) onPageNotFound(e){ // 無(wú)法跳轉(zhuǎn)到tabbar頁(yè)面，如果頁(yè)面不存在可以重定向到第二個(gè)頁(yè)面 console.log("onPageNotFound"); wx.navigateTo({ url: "/pages/demo/demo", }) }})promise封裝函數(shù)
export const request=(params)=>{ return new Promise((resolve,reject)=>{ wx.request({ ...params, success:(result)=>{ resolve(result) }, fail:(err)=>{ reject(err) } }); })}request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"}) .then(result=>{ this.setData({ swiper_list: result.data.message }) })1、設(shè)置一個(gè)緩沖事件，獲取本地的存儲(chǔ)中的數(shù)據(jù)進(jìn)行判斷。
2、·{time:Date.now(),data:[...]}。
3、web: localStorage.setItem("key","value") localStorage.getItem("key")。
4、優(yōu)化接口的路徑 使用prominse中的params將url解構(gòu)出來(lái)。
es7 async語(yǔ)法解決回溯的最終方案。
async。
1、onReachBottom 頁(yè)面觸底事件。
2、頁(yè)面上拉觸底事件的處理函數(shù)。觸底事件，當(dāng)頁(yè)面觸底之后，在進(jìn)行請(qǐng)求，并且將請(qǐng)求到的數(shù)據(jù)在追加到原來(lái)的數(shù)組中，并且在觸底后還要進(jìn)行判斷如果總數(shù)據(jù)的頁(yè)數(shù)>=當(dāng)前的頁(yè)數(shù)，要返回wxwx.showToast({title: ‘title’,}),否則繼續(xù)請(qǐng)求。
// pages/goods_list/goods_list.jsimport { request } from "../../request/index.js";Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { // 將這些數(shù)據(jù)導(dǎo)入到子文件中 tabs: [{ id: 0, value: "綜合", isActive: true }, { id: 1, value: "銷(xiāo)量", isActive: false }, { id: 2, value: "價(jià)格", isActive: false } ], first_list:[], }, // 設(shè)置請(qǐng)求后返回的總頁(yè)面的數(shù)量 totalpages:1, handleChage(e){ // console.log(e); // 將子傳遞給父親的索引值解構(gòu)出來(lái) const {id} = e.detail // 將父親data的數(shù)據(jù)進(jìn)行解構(gòu) let {tabs} = this.data // 將data中的數(shù)據(jù)進(jìn)行遍歷 如果此時(shí)的索引值等于數(shù)據(jù)中的id值則將數(shù)據(jù)中的isActive的值改為true // 這里的v表示的是遍歷的數(shù)據(jù)，i表示的是索引號(hào) tabs.forEach((v,i) =>i===id?v.isActive=true:v.isActive=false); // 將這里修改的數(shù)據(jù)加到源數(shù)據(jù)中 this.setData({ tabs }) }, // 頁(yè)面觸底事件 pageParams:{ query:"", cid:"", pagenum:1, pagesize:10 }, // 對(duì)接口數(shù)據(jù)進(jìn)行請(qǐng)求 async getgoodList(e){ const res = await request({ url:"/goods/search", data: this.pageParams }) console.log(res); // 先獲取頁(yè)面的總數(shù)據(jù)，計(jì)算出頁(yè)碼信息 const goodspages = Math.ceil(res.data.message.total / this.pageParams.pagesize) console.log(goodspages) this.totalpages = goodspages this.setData({ // 這一步是將請(qǐng)求到的數(shù)據(jù)在使用數(shù)組拼接的方式拼接起來(lái)，這里用到了數(shù)組解構(gòu)的方法 first_list:[...this.data.first_list,...res.data.message.goods], }) }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { // console.log(options); this.pageParams.cid = options.cat_id this.getgoodList() }, /** * 頁(yè)面上拉觸底事件的處理函數(shù)。觸底事件，當(dāng)頁(yè)面觸底之后，在進(jìn)行請(qǐng)求，并且將請(qǐng)求到的數(shù)據(jù)在追加到原來(lái)的數(shù)組中，并且在觸底后還要進(jìn)行判斷如果總數(shù)據(jù)的頁(yè)數(shù)>=當(dāng)前的頁(yè)數(shù)，要返回wxwx.showToast({title: "title",}),否則繼續(xù)請(qǐng)求 */ onReachBottom: function () { this.pageParams.pagenum++; // 進(jìn)行頁(yè)面觸底的判斷 if(this.totalpages<=this.pageParams.pagenum){ wx.showToast({ title: "頁(yè)面加載完成", }) }else{ this.getgoodList() } }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 */ onPullDownRefresh: function () {
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/121290.html
??蘇州程序大白一文從基礎(chǔ)手把手教你Python數(shù)據(jù)可視化大佬??《??記得收藏??》 目錄 ????開(kāi)講啦?。。?！????蘇州程序大白?????博主介紹前言數(shù)據(jù)關(guān)系可視化散點(diǎn)圖 Scatter plots折線圖強(qiáng)調(diào)連續(xù)性 Emphasizing continuity with line plots同時(shí)顯示多了圖表 數(shù)據(jù)種類(lèi)的可視化 Plotting with categorical da...
摘要：表名列名列名列名值值值刪楷體刪除數(shù)據(jù)是最簡(jiǎn)單的語(yǔ)句了，只需要指定表名和查詢條件就行。列名統(tǒng)計(jì)當(dāng)前條件下查詢出的數(shù)據(jù)的數(shù)量。 一文解析SQLServer數(shù)據(jù)庫(kù) 目錄...
閱讀 2389·2021-11-24 09:39
閱讀 3861·2021-11-19 09:40
閱讀 2235·2021-09-27 13:36
閱讀 1938·2019-08-30 15:44
閱讀 433·2019-08-30 13:52
閱讀 2755·2019-08-30 11:13
閱讀 2275·2019-08-29 16:18
閱讀 1819·2019-08-29 15:43
