微信小程序——1.入门
1.小程序简介
- 小程序与普通网页开发的区别
- 运行环境不同:小程序运行在微信环境中
- API 不同:无法调用DOM和BOM的API
- 开发模式不同
2.第一个小程序
https://mp.weixin.qq.com/ 注册小程序开发账号
安装开发者工具
3.小程序代码的构成
1. 项目基本组成结构
2. 小程序页面的组成部分
3. json配置文件
-
app.json文件
全局配置,包括所有页面路径pages、窗口外观window、界面表现、底部tab
style:全局定义小程序组件所使用的样式版本
在 app.json -> pages 中新增页面的存放路径,即可创建新的页面- project.config.json文件
setting 中保存了编译相关的配置
projectname 中保存的是项目名称
appid 中保存的是小程序的账号 ID - sitemap.json文件
- 每个页面的.json文件
对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json 的 window 中相同的配置项。
- project.config.json文件
-
WXML模板
WXML 和 HTML 的区别
① 标签名称不同
HTML (div, span, img, a)
WXML(view, text, image, navigator)
② 属性节点不同
超链接
③ 提供了类似于 Vue 中的模板语法
数据绑定
列表渲染
条件渲染 -
WCSS样式
-
小程序中 .js 文件的分类
小程序中的 JS 文件分为三大类,分别是:
① app.js
是整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序
② 页面的 .js 文件
是页面的入口文件,通过调用 Page() 函数来创建并运行页面
③ 普通的 .js 文件
是普通的功能模块文件,用来封装公共的函数或属性供页面使用
4.小程序的宿主环境
小程序宿主环境包含的内容
① 通信模型
通信的主体:渲染层和逻辑层
WXML 模板和 WXSS 样式工作在渲染层
JS 脚本工作在逻辑层
② 运行机制
③ 组件
④ API
1.API
2.组件
1.view 组件的基本使用
2. scroll-view 组件的基本使用
在使用scorll-view要给scroll-view固定的高度
3. swiper 和 swiper-item 组件的基本使用
4.常用的基础内容组件
-
text
文本组件
类似于 HTML 中的 span 标签,是一个行内元素
-
rich-text
富文本组件
支持把 HTML 字符串渲染为 WXML 结构
5. 其他常用组件
-
button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
-
image
图片组件
image 组件默认宽度约 300px、高度约 240px
-
navigator(后面课程会专门讲解)
页面导航组件
类似于 HTML 中的 a 链接