微信小程序项目结构

*

组件结构*

项目结构

1. pages文件夹: 路由组件
2. 新建components文件夹: 一般组件
3. app.js: 入口js文件 把里面的代码全删了 然后生成一个App的模板代码即可
4. app.wxss: 全局的css文件, 全局的css只在路由组件里面生效 一般组件是用不了的
5. app.json: 全局的配置文件

• pages: 配置路由 写的是绝对路径 那个路径写在第一个 谁就是首页
• window: 全局导航栏配置
  • navigationBarBackgroundColor： 导航栏背景颜色
  • navigationBarTitleText: 导航栏文字
  • navigationBarTextStyle:文字样式 只有white和black
• tabBar: 底部导航栏(最少2个,最多5个)
  • color: 文字未选中时的颜色
  • selectedColor: 文字选中时的颜色
  • list: 单独导航的配置项
  • pagePath: 绝对路径 写文件的路径
  • text: 文字
  • iconPath: 未选中时的图标
  • selectedIconPath: 选中时的图标

组件结构

1. wxml: html文件

• div => view
• span => text
• img => image

2. wxss: css文件

• 背景图片: 不能是本地图片 只能是网络图片

3. js: js文件

• 只要在html里面使用了变量 必须用{{}}包起来
• 使用数据 先定义在data当中 然后用插值表达式{{}}
• wx:for: {{数据名}} 默认的每一项叫item 下标叫index
• wx:for-item: 改变item的名字 wx:for-index:改变index的名字
• wx:if
• 绑定事件
• 点击事件: bindtap
• 长按事件: bindlongtap
• 所有的事件都把@换成bind: bindchange bindinput bindblur…

4. json: 组件配置文件

• 配置和app.json配置一样

*随机颜色

*首先随机三个数分别等于颜色的rgb，然后push到定义的数组里面，因为循环的数组都7个数据所以随机的颜色也有7个数据，在用动态绑定style实现效果



效果

左右摇摆效果css样式

.yao是需要摇动的盒子
@keyframes是设置摇动的效果

splite(’ ')用法

spilte("\n")按回车的字符分割返回新的数组
1、splite(’ ‘)可以将字符串按某个字符或者其他分割。返回数组。
2、reverse()该方法会改变原来的数组，而不会创建新的数组。此函数可以将数组倒序排列。
3、join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(’ ');

分割前

分割后