前端小程序
1:小程序介绍
1:小程序相当于一种App,不需要单独下载安装,但要在微信中使用。
2:小程序项目结构的介绍
1:sitemap.json
这是一个json文件,也就是一个配置项文件
可以用来设置小程序是否可以在微信内部被搜索到:
2:project.config.json
这是一个json文件,是整个项目的一个配置项文件,一般不做修改
即使要做修改,也可以通过详情中的本地配置项进行可视化修改
3:project.private.config.json
此配置项文件同project.config.json类似,只不过优先级高一些
可以配置项目的一些私密性属性
4:project.private.config.json文件不是项目必须的,是可以被删除掉的
app.wxcss 此文件是整个项目的样式文件:
5:app.json 此文件是整个项目的配置文件 用来设置导航 以及页面的加载顺序等 项目中必须有此文件
app.js 是整个项目文件的逻辑书写
6:pages文件夹
此文件夹相当于是views中的那个pages或是views文件夹,表示路由项文件夹
此文件夹当中,还是文件夹内容
在pages文件夹中的文件夹中,才是对应页面的相关内容
页面相关的内容有4项
index.wxml 这个是页面的基本结构
index.wxss 当前页面的样式内容
index.json 是当前页面的配置项文件
index.js 是当前页面的业务逻辑功能文件 比如页面的跳转啊 请求的发送等...
3:小程序中数据渲染
1:数据的渲染来自于当前页面中data中的数据。
2:在home.wxml中的数据渲染,可以使用插值表达式,即就是双大括号。
3:要想在home.js中更改数据的时候要使用this.setData()
的方式进行更改数据。
4:页面中的数据判断可以使用wx:if

5:渲染数据的话要使用wx:for

6:小程序中的事件说明
1:小程序中的事件注册需要使用bindtap,类似于html页面中的click事件
2:只不过小程序当中 ,不是用的鼠标,而是用的手指,来触发或是按压,因此是tap
3:bindtap是有事件冒泡的,当前元素上的事件被触发的时候,父级元素上的事件也会被触发
4:catchtap是没有事件冒泡的.
7:小程序的tabbar
可以在全局中的app,json中设置,
自动显示了就
8:小程序中的路由跳转
1:wx.navigateTo({}) 跳转到某个页面 有历史记录 可以返回上级页面 不会卸载原来页面,
2:wx.redirectTo({}) 效果同上 但是不能返回上级页面 因为没有记录上级记录 会卸载原来页面
3:wx.navigateBack({}) 返回某级页面。
9:小程序中的轮播图
轮播图要使用swiper组件 此组件内只能有swiper-item。
swiper-item中再有image组件,去实现图片的渲染。