微信小程序(上)

微信小程序(上),第1张

没法的

你要换个思路,不能用传统的html+css_js的方式开发

因为小程序里百js是不能直接度 *** 作页面dom元素的,和vue框架很类似

页面所有需要调用或者判断的数据全都依赖setData()

比如你想点一个按钮改变一个view的样内式,你就给这个view写两个Class

然后点击事件触发后通过setData()来绑定,让该元容素显示哪个Class

Name

实时获取推荐使用Socket。

定时获取数据的话写个定时器,每10秒获取一次数据。

定时:

var t = null;

t = setInterval(function(){

//获取数据的代码

},10000)

1、服务器获取到的数组中嵌套 对象组成的数组,控制台输出:

2、解析并绑定服务器获取到的数据,js文件:

3、绑定一层的shopList数据, wxml文件:

4、绑定shopList数组中的二层equips数据,wxml文件 中 只需要itemequips即可

最开始循环获取到数据后,总以为需要嵌套循环出二层数组对象,并分别绑定数据。兜兜转转绕了一大圈,发现只要将一级数组循环获取到,二层数组对象直接“itemxxx”就可以在wxml文件中直接进行数据绑定了。 

如图所示是接下来需要完成的效果:

页面结构:2个, index (首页)以及 details (详情页),首页是产品列表,点击产品后进入对应的详情页。

首页的wxml结构:

首页的js数据:

对于详情页请求数据,核心在于点击对应产品然后请求对应的产品数据,因此这里的 navigator 组件跳转的url至关重要,这里的 /pages/details/detailsgoodsId={{index} 是模拟了后台提供的数据接口,后面的 goodsId 作为产品的辨识符,当点击之后可以获取到当前点击的是哪个产品,以供详情页进行请求数据。

详情页wxml结构:

详情页js数据:

详情页请求数据的重点在于生命周期函数, onLoad 函数,它可以在页面加载的时候进行触发,并可以通过参数获取到跳转链接上面的辨识符,也就是通过 onLoad 函数中的 options ,获取到了刚才在 indexwxml 页面url中的辨识符: goodId ;

通过它可以获取到对应的产品数据,再将数据进行修改更新到详情页结构 detailswxml 即可。

本案例中跨页面传递数据主要是利用了URL传值,在另外一个页面中接收,并将数据渲染到页面中,这个过程就需要用到生命周期函数:onLoad函数。

以上就是关于微信小程序(上)全部的内容,包括:微信小程序(上)、微信小程序购物个人主页代码怎么设置、微信小程序从js文件没法选中wxml中组件的id么等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9453993.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存