微信小程序开发
文件和目录结构的介绍
一个完整的小程序开发项目有两部分组成:主体文件、页面文件
主体文件:
(主体文件开头必须是app开头,而且.js、.json是必须存在的)
-
app.js
- 小程序入口文件
-
app.json
- 小程序的全局配置
-
app.wxss
- 小程序的全局样式
页面文件
页面文件都是位于pages目录下,一个页面对应一个文件夹
一个页面.js、.wxml是必须存在的
-
.js
- 页面逻辑
-
.wxml
- 页面结构
- .wxss
- 页面样式
- .json
- 小页面配置
渲染切换(可忽略)
-
将选中的代码删除掉
-
保存即可ctrl + s
如何新建页面以及调试基础库
新建页面
-
方法1
- 直接在pages目录下新建一个页面为名的文件夹,然后在文件夹上新建一个page,名字与文件夹名一样
-
方法2
-
在app.json文件中修改页面配置
-
小程序基础库
小程序基础库是微信小程序的运行环境:给小程序提供各种api,工具,以及基础框架和运行逻辑
在哪里设置?
配置文件介绍
JSON是一种数据交互的格式,但是在小程序开发中,json扮演的配置项的角色,用于配置项的角色,用于配置项目或页面属性和行为,每个页面或组件也有一个对应的json文件
app.json
可以配置页面路由和全局属性小程序配置 / 全局配置 (qq.com)
pages配置
1、不需要带有文件后缀
tabbar字段
定义小程序顶部、底部tab低栏,用于是西安页面之间的快熟切换
list属性最少两个,最多五个
entryPagePath字段
首页展示:entryPagePath:"pages/index/index",
window字段
设置状态栏、导航条、标题、窗口背景颜色
页面.json
配置一些当前页面的属性,窗口样式、页面标题
字段和全局配置一样(app.json)
project.config.json
小程序项目的配置文件,用于保存项目的一些配置信息和开发者个人设置
项目本地设置会自动更新这个项目配置信息,project.config.json有两个,影响编译的放在公共的,不影响的放在私人的
配置sass
在project.config.json文件配置
sitemap.json
配置小程序以及页面是否运行被微信索引每提高小程序在搜索引擎搜索到的概率
小程序的样式和组件介绍
view===div容器组件,块级元素,占据一行
rpx自适应缩放
规定任何宽都是750rpx
swiper与swiper-item轮播图
image
text
navigation
scroll-view
事件绑定和事件对象
catch阻止时间冒泡
data传参
mark传参
数据绑定和声明
setData
、、
model双向绑定![](https://i-blog.csdnimg.cn/direct/6174b9d7b10848518bb30a72dcc41e0e.png)
列表渲染
条件渲染![](https://i-blog.csdnimg.cn/direct/993e24330485445498b48cc98b123e3c.png)
![](https://i-blog.csdnimg.cn/direct/d075bef86a5242ab83bf9058efa1d798.png)
小程序运行机制
小程序的状态:
小程序版本更新![](https://i-blog.csdnimg.cn/direct/2437225e002b438fbb5e140d174bf64c.png)
小程序的生命周期
程序从创建到销毁的整个过程![](https://i-blog.csdnimg.cn/direct/af643ee9f0fa4487b9f30d144cf15a2c.png)
页面的生命周期![](https://i-blog.csdnimg.cn/direct/e432973ad7c94d0baf523a34d3242871.png)
小程序API初识
request
loading
小程序的本地存储
路由与通讯
页面处理函数
上拉加载
下拉刷新
自定义组件
组件的数据以及方法
组件的属性propties组件的属性
组件的自定义组件注意事项
npm下载包
vant/weapp
小程序的分包加载
配置分包以及打包配置
独立分包
分包预下载
获取微信头像
获取微信昵称![](https://i-blog.csdnimg.cn/direct/70f3f3d6d2b1462f8845cc163a55cb61.png)
![](https://i-blog.csdnimg.cn/direct/1b229c6744c040c88935ca5fa43a8931.png)
转发功能
转发朋友圈
客服能力
框架接口-getApp()
页面间通讯
\
组件通讯--时间总线![](https://i-blog.csdnimg.cn/direct/8baae325dfaf45d9b5c78dc6a1d96967.png)
自定义导航栏
上线发布
原文地址:https://blog.csdn.net/weixin_71942139/article/details/140554608
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!