【编程技术】如何开发微信小程序
登录 | 论坛导航 -> 华新鲜事 -> 技术の宅 | 本帖共有 43 楼,当前显示第 28 楼 : 从楼主开始阅读 : 本帖树形列表 : 返回上一页
作者:滚雪球 (等级:11 - 出神入化,发帖:11187) 发表:2017-08-18 21:26:23  28楼 
继续来讲解怎么做一个稍微有点用处的微信小程序

一开始最主要需要编辑的就是index.wxml和index.js。把数据放在index.js里面,把标签放在index.wxml里面,还有一些简单的loop功能。 比如下面这个数据写在index.js里面。 Page({})是微信小程序的基本格式,不需要理他。需要提供数据的话,就写data:{}。这里我初始化了一个数组,数组的名字叫iconSize,然后我给了这个数组6个值,如果你还记得大学学的C程序基础的话,其实是一样的。 

 Page({ data: { iconSize: [20, 30, 40, 50, 60, 70] } }) 

 有了上面的数据以后,我就可以在index.wxml直接使用iconSize做点事情了。

 

   

 

上面的第一个tag是,可以给他一个class,随便叫什么,然后晚一点可以用css渲染。第二个tag是,你就当他也是view就好了,这里可以简单的写一个循环函数了,这个wx:for是微信提供的,你就记住微信给的函数都是wx开头的就行了,这个有点像AngularJS,后面可以直接引用上面定义的数组iconSize,注意这里有两个{{。他的功能就是循环导入数组里面的每一个数字。然后在block里面有使用了一个tag叫,他的type我们可以使用success,就是过一下你会看到的对勾就是success了,然后定义这个对勾的大小,item是一个关键字,它就是调用iconSize里面定义的每一个数据,最终执行结果是这样的。 执行结果:



最后我在index.wxss里面调整了一下这些对勾在屏幕里显示的位置,就是类似css了。

.group {

  position: relative;

  top: 50%;

  height: 50px;

  margin-top: 100px;

  margin-left: 30px;

  display: flex;

}

这里留个小作业,你可以很简单的在屏幕里面再添加点什么。比如warning。



欢迎来到华新中文网,踊跃发帖是支持我们的最好方法!原文 / 传统版 / WAP版只看此人从这里展开收起列表

本帖共有 43 楼,当前显示第 28 楼,本文还有 N-1 层楼,要不你试试看:点击此处阅读更多 >>



请登录后回复:帐号   密码