2023-01-29


前端小程序

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组件,去实现图片的渲染。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容