-
一个极其简单的购物微信小程序demo,用来练手的,很多地方都有现成的api可以调用,主要熟悉下开发流程
-
后端采用json-server,前端使用原生小程序组件和官方的weui组件库。
(weui组件库文档不是很完善。推荐看w3c的文档,有案例代码,会好很多。微信小程序 WeUI·快速上手_w3cschool)
- 因为是练手项目,数据库的设计也不是很合理,比如所有商品的评论都是一样的。
- 也有很多重复的请求,暂时没有避免。
在db文件夹下启动json-server服务器:json-server --watch .\db.json -p 5000
传送门:e.target与e.currentTarget - 简书 (jianshu.com)
我的感觉是页面需要的数据写在data里面,调用方法需要的数据写在外面。
传送门:
typicode/json-server:在不到30秒的时间内获得一个完整的假REST API,零编码(认真) (github.com)
db.json同级目录下放一个public文件夹就行,里面放我们的静态资源,可以用url访问到
我看了官方案例感觉很玄学,mode太多了,自己调试一下最好。
我们使用_page和_limit进行拆分数据的时候,相应投有一个X-Total-Count字段可以告诉我们一共有多少条数据。
https://github.com/typicode/json-server#slice
npm安装好对应组件后,点击微信开发者工具菜单栏的工具,选择构建npm
传送门:
引入@miniprogram-component-plus/sticky报错不存在? | 微信开放社区 (qq.com)
// wx.navigateTo , can not navigateTo a tabbar page
// wx.redirectTo ,关闭当前页面
// wx.switchTab ,I can navigateTo a tabbar page
取传递的数据就在目标的options里面
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options){
}
传送门:wx.navigateTo(Object object) | 微信开放文档 (qq.com)
传送门:wx.previewImage(Object object) | 微信开放文档 (qq.com)
引入方法:WeUI组件库简介 | 微信开放文档 (qq.com)
使用:官方文档没有案例可考……
传送门:
Searchbar | wechat-miniprogram / weui
(26条消息) 微信小程序searchbar搜索功能的使用_m0_59933933的博客-CSDN博客_小程序searchbar
官方文档没有案例可考,而且这个组件有严重bug
可以找这篇博客解决:(27条消息) 微信小程序vtabs源码分析解决组件滑动跳转混乱或不准确bug_ZGIT的博客-CSDN博客
基础使用传送门:(27条消息) 小程序vtabs_weixin_40790248的博客-CSDN博客_v-tabs
和h5的差不多
这个有一个api:getUserProfile
传送门:wx.getUserProfile(Object object) | 微信开放文档 (qq.com)
传送门:(27条消息) 怎么解决微信小程序提示信息(wx.showToast)一闪而过页面跳转的问题_欧世乐测试开发技术的博客-CSDN博客
官网:Form | wechat-miniprogram / weui
一些底部栏是需要用户授权登录时才能查看完整内容,不能直接wx.getUserProfile,需要有一个按钮让用户点击授权才行。而且我是把跳转逻辑写在onShow里面,用户就算点返回,也还是会跳转至授权页面,这样感觉不怎么好,没想到啥好的方法解决。
官网没有案例:Slideview | wechat-miniprogram / weui
w3c上有:微信小程序 WeUI·Slideview_w3cschool
点击加入购物车或者在购物车里面改变商品数目改变勾选状态,都会自动跳转至首页。我找了很久也不知道原因。
无意中发现好像是json-server的原因,我换了一个db.json就没有这个bug了,应该是数据部分有问题吧,还没有排查到详细原因,待会再看看。
太久没用过了,快忘了。全选用这个很方便
官方推荐用checkbox-group来判断。我们全选这里就不向后台发多次请求了,真实业务情况应该是指向后台发一个请求就行,因为后台是json-server就不奢求了
checkbox-group | 微信开放文档 (qq.com)
我没有向后台存储数据,直接使用的是临时文件地址