一个商城小程序的踩坑之路

2022-12-11    分类: 网站建设

这几天捣鼓了一个商城小程序(copy了好几个商城的UI),利用原生组件写了几个页面,也碰到了一些痛点,在此做一个简单的记录。几个简单的界面如下:

首页商城分类商品详情购物车个人中心痛点原生的方式不能用sass。因为用vue习惯了用sass写样式,但小程序不能直接使用sass等预处理器,不过好像用了mpvue、wepy等框架可以实现用css预处理器(还未尝试过,试过了再更新)。去掉标题栏必须全局统一去掉。本来以为在页面的json文件里可以覆盖,结果发现并不起作用,所以统一去掉之后,如果你在某些页面又需要标题栏只能自己用view模拟一个(如我这里的商品详情页),希望以后官方可以人性化一点。

"navigationStyle": "custom" //只在app.json中生效

3. movable-view貌似有bug。在商城首页的精选专题中我尝试了用 movable-view实现横向滚动效果,后来发现,整个页面也会随之滚动,在微信小程序社区里也有人遇到这个问题,不过没人回答,不知道是自己的问题还是官方的bug,后来就改用scroll-view实现了。

精选专题

4. 无tab切换组件(如下所示)。虽说tarbar把position设置为top是一个tab,但这种必须在最顶部,如果要在中间某个内容区使用就只能自己实现了。

tab示例

5. 无法动态增加、删除节点。本来想实现一个加入购物车的动画,比如点击了加入按钮,商品图片会掉下来,慢慢变成一个圆形,落在tarbar的购物车上。结果发现不能直接删减节点,并且tabBar的位置好像也无法获取到,在开发者工具中发现其并没有渲染出来(希望知道的小伙伴告知一下,先谢谢了)。

6. background-img只能用于网络图片或者是base64转码后的图片,一般的本地图片无法使用,如果要用本地图片作为背景图,可以使用image加绝对定位的方式。

7. 当text组件和view组件中的文字全英文或中英混合输入时(全中文时正常)不换行。解决方案:

word-break: break-all

但可能会出现切断单词的情况,如将‘yang’分解为‘ya’和‘ng’放在两行显示,对此尚无很好的对策。

8. 联系客服。有两种按钮方式可以实现这个功能,会有一个默认图标,去不掉,如果想自定义样式可以使用。

注意事项下拉刷新。onPullDownRefresh在app.js中不起作用, 需要监听哪个页面的下拉刷新就在对应页面的js文件里添加onPullDownRefresh,且需要在json文件中添加

"enablePullDownRefresh": true

2. 列表渲染。wx:for 用在标签上,以渲染一个包含多节点的结构块,与vue类似,小程序提供了wx:key来保证列表项的自身状态,从而在渲染时直接复用,提高列表渲染效率,可以有以下两种值形式:

1、列表中唯一的字符串或数字,且不能动态改变 2、保留关键字 *this 代表在 for 循环中的 item 本身(如果item本身就是唯一的话)

注意key是不用{{ }}包裹的

wxml: {{item.name}} js: { id: 1, name: "评论" }, { id: 2, name: "推荐" }, { id: 3, name: "详情" }

tip:如果wx:for循环中没有使用key,控制台会给出警告提示,但不会报错。不过为了性能效率,还是强烈建议大家都加上key,除非你能保证循环的数据是不动态变化的。

3. 常用标签。

:非组件,只是一个包装元素,不渲染,类似于vue中的template,常在wx:for循环中使用 :类似于div,块状元素 :组件内只能嵌套组件,行内元素,如果嵌套其他元素会不显示 :图片要加后缀名,有默认宽高 :轮播图,有默认宽高,里面的宽高默认100%

4. 由于开发者工具用的真心难受,所以其实可以使用自己喜欢的工具进行开发,我用的是webstorm,在使用之前需要先配置一下以支持小程序的语法:

1、设置wxml、wxss语法高亮 2、导入wechatcode.jar支持小程序代码提示

具体方法就不详细展开,随便搜索就能找到。尽管如此还是无法达到好支持,部分语法也会识别不了,但影响不大。

5. navigator跳转。导航类型分三种,通过open-type属性设置

A、open-type="navigate" 打开新界面B、open-type="redirect" 在本界面中打开新界面C、open-type="switchTab" 控制tab页之间的切换

这里,需要注意的是:

1、所有需要跳转的页面必须在app.json中注册 2、A是navigator的默认跳转方式,可以通过wx.navigateBack()返回 3、B跳转到目标页面后,导航栏是没有返回按钮的,并且也无法通过wx.navigateBack()返回 4、A、B只能跳转非tabBar中注册的页面,不能打开url="../index/index"(一般是tabBar的首页),因为pages/index/index界面是tab页 5、C只能打开tabBar注册的界面后言

刚接触小程序没几天,有点瑟瑟发抖,有不对的地方还望小伙伴指正,共同成长。

这个小项目会持续更新,我会让它更加完善,一些样式和组件的抽离、请求的封装等在后续会加上去。暂时就先这样吧,以后有遇到问题再补充,希望明天入职愉快。

Paranoidyang/wx_shopping_mall

当前名称:一个商城小程序的踩坑之路
路径分享:https://www.cdcxhl.com/news/221542.html

成都网站建设公司_创新互联,为您提供自适应网站网站设计用户体验品牌网站建设网页设计公司网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站建设网站维护公司