成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一個微信小程序

moven_j / 3124人閱讀

摘要：前言微信小程序在當(dāng)前比較火熱，秉著學(xué)習(xí)的目的和態(tài)度，仿都可手機點餐寫了一個微信小程序，實現(xiàn)了大致功能。那么，我給大家介紹下這個微信小程序。

前言

微信小程序在當(dāng)前比較火熱，秉著學(xué)習(xí)的目的和態(tài)度，仿“CoCo都可手機點餐”寫了一個微信小程序，實現(xiàn)了大致功能。那么，我給大家介紹下這個微信小程序。

使用到的工具：

1.Visual Studio Code 編譯器
2.微信web開發(fā)者工具
3.Easy Mock 創(chuàng)建后臺數(shù)據(jù)
4.Iconfont-阿里巴巴矢量圖標(biāo)庫
5.微信小程序開發(fā)文檔

實現(xiàn)的功能重點

1.頁面宣傳圖片自動手動切換功能
2.自助點餐功能
3.加入購物車功能
4.清空購物車，購物車增加減少飲品功能
5.選擇彈窗功能

頁面宣傳圖片自動手動切換功能實現(xiàn)如圖

這個效果是用微信小程序自帶的swiper（滑塊視圖容器）做的，可以多張圖片輪播，設(shè)置值就好了，圖片是網(wǎng)上下載的。具體代碼如下：
WXML(HTML)代碼

CSS代碼

自助點餐功能如圖

這個自助點餐點擊跳轉(zhuǎn)到商品列表頁面是用bindtap綁定函數(shù)，再用小程序自帶的api，wx.navigateTo導(dǎo)航實現(xiàn)的，wx.navigateTo可以保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
WXML代碼

js代碼

加入購物車彈窗功能

這個加入購物車是通過easy-mock后臺創(chuàng)建數(shù)據(jù)，在用wx.request請求數(shù)據(jù)。用數(shù)組添加商品就加入數(shù)組。

WXML代碼

js代碼 數(shù)據(jù)請求

購物車操作

還有一些功能就不一一展示了，如下所示：

對于寫微信小程序的幾點心得：
1.多看文檔，微信小程序自帶了很多api組件什么的，不要寫著寫著發(fā)現(xiàn)自己寫的都是自帶的組件什么的。推薦一個文檔鏈接：https://mp.weixin.qq.com/debu...
2.小圖標(biāo)啥的，可以摳圖，也可以到網(wǎng)上下載，我是從一個圖標(biāo)庫里下載的，樣式很全，很好用。鏈接：http://www.iconfont.cn/collec...
3.后臺數(shù)據(jù)創(chuàng)建，用easy mock，這個也好用。鏈接：http://www.easy-mock.com
4.css樣式可以引用weui，在全局樣式app.wxss中引用，適用于所有界面，可以省很多時間寫css代碼。
5.如果有不懂的多百度，多問前輩，，
6.學(xué)如逆水行舟，不進則退啊。多敲代碼。

完整項目地址
https://github.com/Everglow1/... 僅供學(xué)習(xí)交流使用，謝謝！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112849.html

相關(guān)文章

  • 微信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里，也歡迎各位 UI組件開發(fā)框架實用庫開發(fā)工具服務(wù)端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎(chǔ)樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

    Olivia 評論0 收藏0

  • 微信應(yīng)用號（小程序）資源匯總（1010更新）

    摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...

    趙春朋 評論0 收藏0

  • 微信應(yīng)用號（小程序）資源匯總（1010更新）

    摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...

    piapia 評論0 收藏0

  • 前端資源系列（3）-微信小程序開發(fā)資源匯總

    摘要：微信小程序應(yīng)用號開發(fā)資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發(fā)文檔小程序設(shè)計指南工具小程序開發(fā)者工具官方支持微信小程序?qū)崟r預(yù)覽的支持的微信小程序組件化開發(fā)框架轉(zhuǎn)在線工具小程序云端增強社區(qū)微信小程序 微信(小程序or應(yīng)用號)開發(fā)資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發(fā)文檔 小程序設(shè)計指南 工具 小程序開發(fā)者...

    paney129 評論0 收藏0

發(fā)表評論

0條評論

moven_j

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<