微信小程序项目结构
*
组件结构*
项目结构
- pages文件夹: 路由组件
- 新建components文件夹: 一般组件
- app.js: 入口js文件 把里面的代码全删了 然后生成一个App的模板代码即可
- app.wxss: 全局的css文件, 全局的css只在路由组件里面生效 一般组件是用不了的
- app.json: 全局的配置文件
- pages: 配置路由 写的是绝对路径 那个路径写在第一个 谁就是首页
- window: 全局导航栏配置
- navigationBarBackgroundColor： 导航栏背景颜色
- navigationBarTitleText: 导航栏文字
- navigationBarTextStyle:文字样式 只有white和black
- tabBar: 底部导航栏(最少2个,最多5个)
- color: 文字未选中时的颜色
- selectedColor: 文字选中时的颜色
- list: 单独导航的配置项
- pagePath: 绝对路径 写文件的路径
- text: 文字
- iconPath: 未选中时的图标
- selectedIconPath: 选中时的图标
组件结构
- wxml: html文件
- div => view
- span => text
- img => image
- wxss: css文件
- 背景图片: 不能是本地图片 只能是网络图片
- js: js文件
- 只要在html里面使用了变量 必须用{{}}包起来
- 使用数据 先定义在data当中 然后用插值表达式{{}}
- wx:for: {{数据名}} 默认的每一项叫item 下标叫index
- wx:for-item: 改变item的名字 wx:for-index:改变index的名字
- wx:if
- 绑定事件
- 点击事件: bindtap
- 长按事件: bindlongtap
- 所有的事件都把@换成bind: bindchange bindinput bindblur…
- json: 组件配置文件
- 配置和app.json配置一样
*随机颜色
*首先随机三个数分别等于颜色的rgb，然后push到定义的数组里面，因为循环的数组都7个数据所以随机的颜色也有7个数据，在用动态绑定style实现效果
效果
左右摇摆效果css样式
.yao是需要摇动的盒子
@keyframes是设置摇动的效果
splite(’ ')用法
spilte("\n")按回车的字符分割返回新的数组
1、splite(’ ‘)可以将字符串按某个字符或者其他分割。返回数组。
2、reverse()该方法会改变原来的数组，而不会创建新的数组。此函数可以将数组倒序排列。
3、join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(’ ');
分割前
分割后