uniapp开发电商app过程中遇到的几个小问题及解决方法

布满荆棘的人生 2021-07-25 22:46 621阅读 0赞

# 借用uniapp插件快速开发电商app #

[DCLOUD插件市场][DCLOUD]  
在dcloud插件市场中有很多现成的插件及模板，可以直接使用。  
比如仔仔大神的仿转转电商模板，基本架构都是有的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
此模板中包含：首页/发现/消息/二手/我的等tab页等。  
可以满足一个电商app的基本需求。

# v-for的使用报错 #

`v-for使用报错:Cannot use v-for on stateful component root element because it renders multiple elements.`  
解决方案：  
错误提示翻译为中文大致意思：不能在根元素（root element）使用 v-for，因为v-for是个循环体呈现多个元素，v-for在根元素上导致无法渲染。

`解决方案：不要把v-for放在根元素即可。`

# 页面之间的传值 #

通过navigator进行页面之间的跳转时，可以传递数据，如果传递的是个对象，则可以通过:  
先将对象转化为字符串，然后通过`encodeURIComponent`的方法进行转化，在页面接收时，可以通过`JSON.parse(decodeURIComponent(option.数据));`的方式来接收。

//传递数据
    <navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
    
    // navigate.vue页面接受参数
    onLoad: function (option) { 
        const item = JSON.parse(decodeURIComponent(option.item));
    }

如果传递的数据格式不是对象，则可以直接传递，不需要进行对象与字符串的转化。

# app中需要跳转到外部链接的方法 #

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

[DCLOUD]: https://ext.dcloud.net.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/2dc9ff2a213245659fa9dfcac4186d07.png