微信公众平台
微信公众平台网址:http://mp.weixin.qq.com
微信公众平台主要包括:服务号,订阅号,小程序。
小结
小程序相对于 app
,网页的优势。
小程序相对于 app
更加轻量,传播更方便。
小程序相对于 网页
体验更好,权限更多。
小程序文件结构
目标
学习小程序的4大结构。
概述
网页三大标准:结构 html
,样式 css
,脚本 js
。
小程序文件结构主要分为四大标准,分别是 wxml
,wxss
, js
, json
。
网页三大标准,小程序四大标准。
JSON
配置项作用。
JSON
注意事项
小程序的 JSON
配置项是非常严格的,主要注意以下几点:
-
键名称必须用双引号,字符串数据也必须用双引号。
-
不能书写注释,会报错。
-
不能有多余的逗号。
页面配置
"pages"
代表页面配置项,主要的功能用于管理小程序所有页面,没有在 pages 添加的页面小程序无法访问到。
"pages": [ "页面路径1", "页面路径2" ]
窗口配置
"window"
代表窗口表现配置项。
"window": { // 导航栏背景颜色 "navigationBarBackgroundColor": "#f00", // 导航栏的标题文字 "navigationBarTitleText": "黑马", // 导航栏的文件颜色 "navigationBarTextStyle": "white", // 下拉后的背景颜色 "backgroundColor": "#f2f2f2", // 下拉后的加载小圆点的颜色 "backgroundTextStyle": "dark", // 开启页面下拉刷新功能 "enablePullDownRefresh": true },
补充: 自定义导航栏 "navigationStyle":"custom"
,不使用小程序自带的导航栏,右上角胶囊按钮无法去掉。
tabBar
配置
注意事项:list
数组最多只能配置 5 个,图标图片需要使用本地图片,使用相对路径引入。
tabBar
一般是在界面的底部。
"tabBar": { // 选中时候的文字颜色 "selectedColor": "#d81e06", "list": [ { // 没选中时候的图标路径 "iconPath": "images/tabs/index.png", // 选中时候的图标路径 "selectedIconPath": "images/tabs/index_selected.png", // 点击 tab 的时候跳转的页面 "pagePath": "pages/index/index", // tab 的文字 "text": "首页" }, { "pagePath": "pages/my/my", "text": "我的" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] },
配置项图解
局部页面配置项
页面配置项只能对本页面的窗口表现进行配置,也就是 window
的子配置项,不能配置 tabBar
和 pages
。
{ "usingComponents": {}, "navigationBarBackgroundColor": "#00c777", "navigationBarTitleText": "首页" }
如果 app.json
配置了某个属性,页面 json
也配置了,以页面配置项为主。
小结
全局配置的 pages
,window
配置项。
pages
页面配置项,小程序的页面必须要在 pages
配置过才可以访问。
window
窗口表现配置项,主要用于配置标题栏和下拉后的背景。
tabBar
tab栏配置项,一般在底部,用于切换页面的。
小程序样式 wxss
目标
小程序 rpx
单位的使用。
概述
wxss
主要的功能还是 和 css
是一样的,wxss
新增了 rpx
单位。
rpx
单位 *
rpx
( responsive pixel) 响应式像素,小程序把所有设备的屏幕都水平分成 750份,也就是 750rpx
刚好占满水平方向整个屏幕。
微信小程序常用布局的单位主要是: rpx
和 %
. 尽量不要使用 px
或 rem
。
其他补充
-
app.wxss
不需要引入,样式对整个项目都生效,页面的样式,也不需要引入,页面自动生效。 -
如果希望引入某个样式,使用
@import "样式的路径";
小结
小程序的样式几乎和平常书写一样,主要就是单位需要换成 rpx
和 %
;
编译模式 - 单页调试
目标
学会添加编译模式调试页面。
概述
小程序页面调试不能像网页那样通过url
地址访问,每次编译刷新的时候,都默认跳转到 pages
配置项中的第一个页面,对其他页面调试很不方便。
添加编译模式:在开发工具的编译模式中点击下拉三角箭头 - 添加编译模式,把需要调试的页面进行配置即可。
参考截图
小程序组件 - WXML
目标
学习小程序布局常用组件<image>
<text>
<view>
概述
小程序的组件 和 HTML 的标签,其实都是标记语法,符合 XML
语法规范。
小程序所有标签都需要闭合,小程序建议使用双标签。
文本组件
<text>文本组件</text>
显示模式:行内显示模式。
注意事项:
-
<text>
只能嵌套<text>
。 -
只有
<text>
组件才能实现长按选中文字,需要添加selectable
开启长按选中。 -
文本换行的时候可以使用
\n
。
注意:如果组件属性的值布尔类型,添加了属性就相当于把值设置成了 true,所有组件通用。
图片组件
<image src="图片路径"></image>
图片注意事项
-
图片有默认宽高,导致图片变形,所以引入图片的时候,记得通过样式设置宽高。
-
本地图片会随着项目打包上传,图片过多导致项目慢,所以图片尽可能用线上图片。
-
webp
图片格式在模拟器中和安卓手机上能显示,但是在IOS
系统不能显示。
图片模式属性 mode
小程序 mode 显示模式默认是拉伸,对没设置宽度的图片进行拉伸就容易变形。
视图容器组件
<view> </view>
容器标签类似 <div>
标签,块级显示模式,常用于布局。
小程序不支持的标签会以行内元素形式排列,不支持:div
p
ul
li
ol
dt
dd
h1~h6
...
初始项目文件补充说明
文件 | 功能 | 备注 |
---|---|---|
project.config.json | 项目配置文件 | 主要是编辑器的配置 |
sitemap.json | 小程序内搜索 | 默认所有页面都能被搜索 |
util.js | 就是一个JS 文件 | 小程序JS 支持模块化导入,导出 |
图标组件
<icon type="图标类型" color="图标颜色" size="图标尺寸"></icon>
注意事项:size 的单位默认是 px
,不能适配所有的终端,建议书写的时候使用 rpx
单位。
富文本组件 *
<rich-text nodes='HTML节点'></rich-text>
注意事项:nodes
属性可以写HTML字符串节点或数组形式的节点。
富文本组件的内容不能单独添加事件,也不能点击富文本内的 <a>
标签跳转页面。
后端传递换行文字主要两种形式:
-
如果是
\n
换行,可以使用<text>
-
如果是
<br>
换行,可以使用<rich-text>
滑动组件(轮播图)
滑动组件是主要用于制作轮播图,当然可以做其他的滑动效果。
<swiper // 开启小圆点指示器 indicator-dots // 无缝衔接轮播 circular // 自动播放 autoplay // 自动播放的间隔 interval="2000" // 小圆点默认颜色 indicator-color="rgba(255,255,255,.3)" // 小圆点活跃状态下的颜色 indicator-active-color="#fff" > <swiper-item> 内容 1 </swiper-item> <swiper-item> 内容 2 </swiper-item> <swiper-item> 内容 3 </swiper-item> </swiper>
常用表单组件
input 输入框组件
小程序的输入框显示模式:块级显示模式。
输入框是否带边框:默认不带边框。
是否支持 value
placeholder
:支持,和之前学习的一样。
小程序输入框 type
值主要作用:控制弹起键盘的外观,只支持 4 个值。
type 值 | 说明 | 备注 |
---|---|---|
text | 文本输入 | 普通键盘 |
number | 纯数字 | |
idcard | 身份证 | |
digit | 带小数点的数字键盘 |
confirm-type 的合法值
confirm-type
主要作用:修改弹起键盘右下角的 文字。默认文字是 完成
值 | 说明 | 备注 |
---|---|---|
search | 搜索 * | 小程序的搜索框一般是通过修改键盘按键搜索 |
send | 发送 | |
next | 下一个 | |
go | 前往 | |
done | 完成 | 默认值 |
button 按钮组件 *
显示模式:块级元素。
<button>按钮</button>
外观型属性
size 控制按钮大小 <button size="mini" >小按钮</button> type 改变按钮颜色 <button type="warn">小按钮</button>
loading 在按钮文字前有加载的图标 <button loading> 小按钮</button>
按钮边框问题:按钮边框是在 button::after
上,参考代码如下。
button::after{ border: none; }
按钮的微信开放能力 **
开放能力核心属性: open-type
效果查看注意事项:需要在手机查看才有真实效果。
open-type 合法值 | 功能描述 | 备注 |
---|---|---|
contact | 客服聊天 | 可以在公众平台添加客服 |
share | 分享 | |
feedback | 用户反馈 | 用反馈的信息能在公众平台看到 |
openSetting | 打开授权设置 |
<button open-type="share">分享</button> <button open-type="contact">客服聊天</button> <button open-type="openSetting">打开授权设置</button> <button open-type="feedback">用户反馈</button>
单选框复选框
复选框进行编组:<checkbox-group></checkbox-group>
单选框进行编组:<radio-group></radio-group>
<checkbox></checkbox> <radio></radio>
navigator 导航链接 **
目标
navigator
跳转普通页,跳转 tabBar
页,后退
概述
类似 HTML 中 <a>
标签。
<navigator>
显示模式:块级显示模式。
<navigator>
的限制:只能用于跳转小程序的页面,不能跳转到网页。
跳转普通页和 tabBar
还需要设置 open-type
。
页面栈
获取历史记录(路由栈):
getCurrentPages()
-
普通页面
跳转:会在路由栈中记录起来,最多只能记录 10 级页面,到达了 10 级,就不能跳转了。
-
tabBar
页面跳转:先把路由栈所有页面清空,再把当前tabBar
页面入栈。
open-type
open-type 值 | 功能 | 备注 |
---|---|---|
navigate | 跳转 普通页 | 默认值 |
switchTab | 跳转 tabBar页 | 路由栈只有一个页面 tabBar 页 |
redirect | 重定向 | 替换当前页面 |
reLaunch | 关闭所有页,打开某个页面 | 相当于重新打开小程序 |
navigateBack | 返回 | 可通过 delta 修改返回层级 |
其他组件补充
组件名称 | 功能 | 备注 |
---|---|---|
scroll-view | 可滚动视图区域 | 超出盒子部分可以通过滚动查看 |
video | 视频 | 视频组件是原生组件,显示层级非常高 |
cover-view | 解决原生层级用的容器 | 可通过样式调整层级,以盖过原生的组件 |
cover-image | 解决原生层级用的图片 | 支持嵌套在 cover-view 里 |
web-view | 承载网页的容器 | 小程序内打开某个网页,需要配置才能生效 |
open-data | 用于展示微信开放的数据 | 获取用户头像,获取昵称,获取地址 |
ad | 广告 | 用户量超过 1000,不能违规 |
原生组件
小程序中的部分组件是由客户端创建的原生组件,这些组件有:
camera
canvas
input
(仅在focus时表现为原生组件) live-player
live-pusher
map
textarea
video
注意事项
带来的问题:原生组件的显示层级高于普通组件。
解决方案:用 cover-view
cover-image
设置层级的方式盖过原生组件。
WXML 进阶语法
数据绑定
Page({ // 页面数据 data: { msg: "今晚吃什么?" } });
<view>{{ msg }}</view>
列表循环
核心指令 :wx:for="{{ }}"
提高效率指令:wx:key=""
修改 item 和 index 名称 :主要用于循环嵌套,wx:for-item="item"
wx:for-index="index"
<block>
标签主要功能:把结构编组,在 <block>
标签上写指令,block 不会显示到页面中。
wx:key
提高效率两种情况 *
-
数组每一项数据是字符串或者数字,使用:
wx:key="*this"
-
数组每一项数据是对象,使用 :一般情况下数据的 id 具有唯一性,
wx:key="id"
参考代码
Page({ // 页面数据 data: { objArr: [ { id: 1, name: "分类" }, { id: 2, name: "秒杀" }, { id: 3, name: "其他" } ] } });
<view class="list"> <block wx:for="{{ objArr }}" wx:key="id"> <view class="item"> {{ item.name }} {{ index }}</view> </block> </view>
条件渲染
<view wx:if="{{ }}"></view> <view wx:elif="{{ }}"></view> <view wx:else></view>
补充 hidden 属性:
小程序中没有 v-show
切换盒子显示隐藏,小程序可以通过 hidden
属性切换隐藏或显示。
小程序中的 AppData
模板数据
小程序自定义组件
组件使用步骤
-
新建组件结构:在
组件.json
有"component":true
属性,组件.js
入口函数是Component()
-
在页面中导入组件:在
页面.json
中 使用usingComponents:{ 组件名称: 组件路径 }
导入。 -
在页面中使用组件:使用
<组件名称> </组件名称>
即可,如果组件名是组合词,使用-
连接。
小程序组件名称注意事项。
首字母大写(Search)便于和官方组件区别开来