目录
11.3. ⻚⾯⽣命周期图解
1、环境准备
1.1 注册账号
建议使用全新的邮箱,没有注册过其他小程序或者公众号的
访问注册页面,耐心完成注册即可
1.2 获取APPID
由于后期调用小程序的接口等功能,需要索取开发者的小程序中的APPID,所以在注册成功后
可登录,然后获取APPID
登录界面,成功后可看到如下界面
然后复制你的APPID,悄悄的保存起来
1.3 开发工具
安装后,打开微信开发者工具
微信小程序自带开发者工具,集 开发 预览 调试 发布 于一身的 完整环境.
但是由于编码的体验不算好,因此建议使用 vs code + 微信开发者工具 来实现编码
vs code 负责敲代码, 微信开发者工具 负责预览
2、第一个微信小程序
2.1 打开微信开发者工具
注意 第一次登录的时候 需要扫码登录
2.2 创建项目
2.3 成功
3、微信开发者工具介绍
详细的使用,可以查看官网
4、小程序的结构目录
小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务.
小程序框架提供了自己的视图层描述语言 WXML 和 WXSS, 以及JavaScript, 并在视图层与逻辑层提供了数据传输的事件系统,让开发者能够专注于数据和逻辑
4.1 小程序文件结构和传统web对比
通过以上对比得出, 传统web 是三层结构,而 微信小程序 是四层结构,多了一层配置.json
4.2 基本的项目目录
5、小程序配置文件
一个小程序应用程序会包括最基本的两种配置文件,一种是全局的 app.json 和 页面page.json
注意: 配置文件中不能出现注释
5.1 全局配置 app.json
app.json 是小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、、底部tab等,普通快速启动项目里边的app.json设置
{
"pages":[ // 页面路径
"pages/index/index",
"pages/logs/logs"
],
"window":{ // 页面样式
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
}
}字段的含义
1.pages 字段-用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序定义在哪个目录
2.window 字段-定义小程序所有页面的顶部背景颜色,文字颜色定义等
3.完整的配置信息请参考app.json配置
5.1.1 tabbar
5.2 页面配置 page.json
这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置
开发者可以独立定义每个页面的一些属性, 如顶部颜色、是否允许下拉刷新等等
页面的配置只能设置 app.json 中部分 window 配置项的内容, 页面中配置项会覆盖 app.json 的 window 中相同的配置项
5.3 sitemap配置- 了解即可
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引
6. 模板语法
WXML是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构
6.1.数据绑定
6.1.1. 普通写法
6.1.2. 组件属性
6.1.3. bool类型
6.2.运算
6.2.1.三元运算
6.2.2.算数运算
6.2.3.逻辑判断
6.2.4.字符串运算
6.3.列表渲染
6.3.1 wx:for
项的变量名称默认为 item wx:for-item 可以指定数组当前元素的变量名
下标变量名默认为: index wx:for-index 可以指定数组当前下标的变量名
wx:key 用来提高数组渲染的性能
wx:key 绑定的值 有如下选择
1. string 类型, 表示循环项中的唯一属性 如
2 保留字 *this, 它的意思是 item 本身, *this 代表的必须是 唯一的字符串和数组
6.3.2 block
渲染一个包含多节点的结构块block最终不会变成真正的dom元素
6.4.条件渲染
6.4.1. wx:if
在框架中, 使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
6.4.2.hidden
类似 wx:if
频繁切换 用 hidden
不常使用 用 wx:if
7. 小程序事件的绑定
小程序中绑定事件,通过bind关键字来实现 如 bindtap bindinput bindchange 等
不同的组件支持不同的事件,具体看组件的说明即可
7.1. wxml
7.2. page
7.3. 特别注意
1.绑定事件时不能带参数 不能带括号 以下为错误写法
2.事件传值 通过标签自定义属性的方式 和 value
3.事件触发时获取数据
8.样式WXSS
WXSS是一套样式语言,用于描述WXML的组件样式
与CSS相比,WXSS扩展的特性有:
· 响应式长度单位 rpx
· 样式导入
8.1.尺寸单位
rpx:可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx,如在iphone6上,屏幕宽度为375px,共有750个物理像素,则 750rpx = 375px = 750 物理像素, 1rpx = 0.5px = 1物理像素
建议: 开发微信小程序时设计师可以用iPhone6作为视觉稿的标准
使用步骤:
1.确定设计稿宽度 pageWidth
2.计算比例 750rpx = pageWidth px, 因此 1px = 750rpx/pageWidth
3.在less文件中,只要把设计稿中的 px => 750/pageWidth rpx 即可
8.2.样式导入
wxss中直接就支持, 样式导入共能
也可以和less中的导入混用
使用@import 语句可以导入外联样式表, 只支持相对路径
⽰例代码：
8.3. 选择器
特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！
⽬前⽀持的选择器有：
8.4. ⼩程序中使⽤less
原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。 但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现
1. 编辑器是 vscode
2. 安装插件 easy less
3. 在vs code的设置中加⼊如下，配置
4. 在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。
9. 常⻅组件
重点讲解⼩程序中常⽤的布局组件
view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox。 等
9.1. view
代替 原来的 div 标签
9.2. text
1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制（只有该标签有这个功能）
4. 可以对空格 回⻋ 进⾏编码
9.2.1. 代码
9.3. image
1. 图⽚标签，image组件默认宽度320px、⾼度240px
2. ⽀持懒加载
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。
9.4. swiper
微信内置轮播图组件
默认宽度 100% ⾼度 150px
9.4.1. swiper
滑块视图容器。
9.4.2. swiper-item
滑块
默认宽度和⾼度都是100%
9.5. navigator
导航组件 类似超链接标签
open-type 有效值：
9.6. rich-text
富文本标签
可以将字符串解析成 对应标签，类似 vue中 v--html 功能
代码
9.6.1. nodes属性
nodes 属性⽀持 字符串 和 标签节点数组
⽂本节点：type = text
· nodes 不推荐使⽤ String 类型，性能会有所下降。
· rich--text 组件内屏蔽所有节点的事件。
· attrs 属性不⽀持 id ，⽀持 class 。
· name 属性⼤⼩写不敏感。
· 如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
· img 标签仅⽀持⽹络图⽚。
9.7. button
size 的合法值
type 的合法值
form-type 的合法值
open-type 的合法值
open-type 的 contact的实现流程
1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid
2. 登录微信小程序官网，添加 客服 -- 微信
3. 为了⽅便演⽰，⽼师⾃⼰准备了两个账号 1. 普通⽤⼾ A 2. 客服-微信 B
4. 就是⼲！
9.8. icon
代码:
js
wxml
9.9. radio
可以通过 color属性来修改颜色
需要搭配 radio-group ⼀起使用
9.10.checkbox
可以通过 color属性来修改颜色
需要搭配 ⼀起使用checkbox-group
10.自定义组件
类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。
10.1. 创建⾃定义组件
类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构
10.1.1. 声明组件
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
myHeader.json
10.1.2. 编辑组件
同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式
slot 表⽰插槽，类似vue中的slot
myHeader.wxml
在组件的 wxss ⽂件中编写样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss
10.1.3. 注册组件
在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和 ⾃定义⽅法
myHeader.js
10.2. 声明引⼊⾃定义组件
⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
index.wxml
10.3. ⻚⾯中使⽤⾃定义组件
10.4. 其他属性
10.5. 定义段与⽰例⽅法
Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法 等。
10.6. 组件-⾃定义组件传参
1. ⽗组件通过属性的⽅式给⼦组件传递参数
2. ⼦组件通过事件的⽅式向⽗组件传递参数
10.6.1. 过程
1. ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中
2. ⽗组件 监听 onMyTab 事件
3. ⼦组件 触发 bindmytap 中的 mytap 事件
1. ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象 传智播客-黑马程序员
4. ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs")
⽗组件代码
⼦组件代码
10.7. ⼩结
1. 标签名 是 中划线的⽅式
2. 属性的⽅式 也是要中划线的⽅式
3. 其他情况可以使⽤驼峰命名
1. 组件的⽂件名如 myHeader.js 的等
2. 组件内的要接收的属性名 如 innerText
4. 更多...
11. ⼩程序⽣命周期
分为 应⽤⽣命周期 和 ⻚⾯⽣命周期
关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。
11.1.应用生命周期
11.2.页面生命周期
11.3. ⻚⾯⽣命周期图解
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
