微信小程序开发教程:文件结构、页面变量传值给js、设置css

新酱
137
文章
33
评论
2019年6月16日13:48:11 评论 308 778字阅读2分35秒

微信小程序虽然与html有点相似,但相似可不是相同,还不知道如何开发微信小程序的可以看看微信小程序开发工具下载、安装教程

微信小程序文件结构

微信小程序开发教程:文件结构、页面变量传值给js、设置css

utils文件夹是全局文件夹,app.js是全局js文件,app.json是配置页面打开顺序的,app.wxss可以定义全局css,剩下两个是配置文件不用管。

pages目录是页面目录,里面存放着小程序所有的页面,比如上面就有index和logs两个页面,每个页面有单独的四个文件

微信小程序开发教程:文件结构、页面变量传值给js、设置css

除了json可以不用管,其他的跟全局的意思一样。

微信小程序变量传值

下面是微信小程序的两个按钮

size属性那里就是用了变量mess,给第一个按钮绑定一个点击事件“dianji”,然后打开test.js

微信小程序开发教程:文件结构、页面变量传值给js、设置css

在data里面可以给变量定义数值,可以看到我给mess变量赋值“mini”,这样这个按钮的size属性的值就是“mini”,变成了小按钮。

微信小程序开发教程:文件结构、页面变量传值给js、设置css

大家还记得我上面给改变按钮绑定了一个点击事件,事件名叫“dianji”,它要实现的效果就是点击一下,下面的按钮就会变大,再点击一下又会变小,如此反复。

我们开始创建dianji方法。跟在test.js里的json后面创建方法即可。

微信小程序开发教程:文件结构、页面变量传值给js、设置css

用date接收到mess的初始值mini,然后开始判断修改即可。

微信小程序设置css

在微信小程序里不支持直接style写css,而是要采用class的形式。

还是那个按钮,我给按钮添加了class属性“anniu”

打开test.wxss文件,这里写css的方式跟html的没有任何区别

我给按钮添加了背景色,可以看到按钮的背景色已经改变了

微信小程序开发教程:文件结构、页面变量传值给js、设置css

更多的微信小程序开发教程请参考微信小程序开发文档。

  • 版权声明: 发表于 2019年6月16日13:48:11
  • 转载注明:https://www.xiaorenjc.net/236.html

您必须才能发表评论!