黑马微信小程序入门
Posted smilecb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了黑马微信小程序入门相关的知识，希望对你有一定的参考价值。
1.环境准备
1.1. 注册账号
建议使用全新的邮箱，没有注册过其他小程序或者公众号的。地址为：https://mp.weixin.qq.com/wxamp/thirdtools/extend?token=461217894&lang=zh_CN
1.2 获取APPID
由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后， 可登录，然后获取APPID。 登录，成功后可看到如下界⾯ 然后复制你的APPID,悄悄的保存起来，不要给别⼈看到
点击开发管理，选择开发设置下面的appid
1.3 下载开发工具
选择开发工具下面的开发中工具
2第一个微信小程序
2.1. 打开微信开发者⼯具
注意 第⼀次登录的时候 需要扫码登录
2.2. 新建⼩程序项⽬
点击小程序选择添加
2.3 填写项目信息
3.小程序的目录结构
⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣的APP体验的服 务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 javascript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
3.1. ⼩程序⽂件结构和传统web对⽐
| 结构 | 传统web | 微信⼩程序 |
|---|---|---|
| 结构 | html | WXML |
| 样式 | CSS | WXSS |
| 逻辑 | Javascript | Javascript |
| 配置 | ⽆ | JSON |
通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json
3.2. 基本的项⽬⽬录
4.⼩程序配置⽂件
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的page.json
4.1. 全局配置app.json
app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置
字段的含义
- pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
- window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如 #000000 | |
| navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持 black / white | |
| navigationBarTitleText | string | 导航栏标题文字内容 | ||
| navigationStyle | string | default | 导航栏样式，仅支持以下值：default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮。 | ios/android 微信客户端 7.0.0，Windows 微信客户端不支持 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的样式，仅支持 dark / light | |
| backgroundColorTop | string | #ffffff | 顶部窗口的背景色，仅 iOS 支持 | 微信客户端 6.5.16 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色，仅 iOS 支持 | |
| enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh | |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom | |
| pageOrientation | string | portrait | 屏幕旋转设置，支持 auto / portrait / landscape详见 响应显示区域变化 | 2.4.0 (auto) / 2.5.0 (landscape) |
| disableScroll | boolean | false | 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置 | |
| usingComponents | Object | 否 | 页面自定义组件配置 | 1.6.3 |
| initialRenderingCache | string | 页面初始渲染缓存配置，支持 static / dynamic | 2.11.1 | |
| style | string | default | 启用新版的组件样式 | 2.10.2 |
| singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
| restartStrategy | string | homePage | 重新启动策略配置 | 2.8.0 |
4.2 tabbar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色，仅支持十六进制颜色 | ||
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色，仅支持十六进制颜色 | ||
| backgroundColor | HexColor | 是 | tab 的背景色，仅支持十六进制颜色 | ||
| borderStyle | string | 否 | black | tabbar 上边框的颜色， 仅支持 black / white | |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab | ||
| position | string | 否 | bottom | tabBar 的位置，仅支持 bottom / top | |
| custom | boolean | 否 | false | 自定义 tabBar，见详情 | 2.5.0 |
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | string | 是 | 页面路径，必须在 pages 中先定义 |
| text | string | 是 | tab 上按钮文字 |
| iconPath | string | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。 |
| selectedIconPath | string | 否 | 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。 |
"pages": [
"pages/index/index",
"pages/img/img",
"pages/my/my",
"pages/search/search",
"pages/logs/logs",
"pages/one/one"
],
"window":
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black",
"enablePullDownRefresh":true
,
"tabBar":
"color": "#0094ff",
"selectedColor":"#009400",
"list": [
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/_home.png",
"selectedIconPath": "icon/home.png"
,
"pagePath": "pages/img/img",
"text": "图片",
"iconPath": "icon/_img.png",
"selectedIconPath": "icon/img.png"
,
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "icon/_my.png",
"selectedIconPath": "icon/my.png"
,
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "icon/_search.png",
"selectedIconPath": "icon/search.png"
]
,
"style": "v2",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
4.3 页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：
配置项
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如 #000000 | |
| navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持 black / white | |
| navigationBarTitleText | string | 导航栏标题文字内容 | ||
| navigationStyle | string | default | 导航栏样式，仅支持以下值default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮。 | iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的样式，仅支持 dark / light | |
| backgroundColorTop | string | #ffffff | 顶部窗口的背景色，仅 iOS 支持 | 微信客户端 6.5.16 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色，仅 iOS 支持 | 微信客户端 6.5.16 |
| enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新。 | |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为px。 | |
| pageOrientation | string | portrait | 屏幕旋转设置，支持 auto / portrait / landscape详见 响应显示区域变化 | 2.4.0 (auto) / 2.5.0 (landscape) |
| disableScroll | boolean | false | 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置 | |
| usingComponents | Object | 否 | 页面自定义组件配置 | 1.6.3 |
| initialRenderingCache | string | 页面初始渲染缓存配置，支持 static /dynamic | 2.11.1 | |
| style | string | default | 启用新版的组件样式 | 2.10.2 |
| singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
| restartStrategy | string | homePage | 重新启动策略配置 | 2.8.0 |
5.模板语法
text标签和view标签
- text相当于web中的span标签 行内元素 不会换行
- view 相当于web中的div元素 块级元素 会换行
<!--
1. text相当于web中的span标签 行内元素 不会换行
2.view 相当于web中的div元素 块级元素 会换行
-->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
5.1数据绑定
- 普通写法
js中
data:
msg:"hollow word",
num:100,
ju:true,
per:
name:"smile",
age:18
,
checked:true
,
wxml中
<!-- 字符串类型 -->
<view>
msg
</view>
<!-- 数字类型 -->
<view>
num
</view>
<!-- 布尔类型 -->
<view>
使用好用ju
</view>
<!-- 对象类型 -->
<view>
per.name--per.age
</view>
<view wx:if="ju">是</view>
<view wx:else="ju"> 否</view>
<!-- 使用bool类型充当属性check 字符串和花括号之间不要存在空格，否则会导致识别识别 -->
<checkbox checked="ju">
</checkbox>
5.2 基本运算
<!-- 算术运算 -->
<view>num+1+1</view>
<!-- 三元运算 -->
<view>
num>100?'num大于100':'num小于100'
</view>
<!-- 判断运算符 -->
<view wx:if="ju==true">
判断为真
</view>
<view wx:else='ju==false'>
判断为假
</view>
5.3 列表渲染
5.3.1 列表
- wx:for="循环的数组或对象" wx:for-item="循环项的名称" wx:for-index="循环的索引"
- wx:key=“唯一值” 用来提高列表渲染的性能
wx:key 绑定一个普通字符串的时候 最好为数组对象中的唯一属性
wx:key="*this" 就表示数组为一个普通的数组 *this表示的是循环项 - 当出现嵌套循环的时候一定要注意 绑定的名称不要重名
- 默认情况下 小程序循环项的名称和索引的名称分别为 item、index
student:[
name:'a',
age:18
,
name:'b',
age:19
,
name:'c',
age:20
]
<view>
<view wx:for="student" wx:for-item="item" wx:for-index="index" wx:key="*this">
index--item.name--item.age
</view>
</view>
5.3.2 block标签
- 占位符标签
- 写代码的时候可以看到这个标签存在
- 页面渲染的时候，小程序可以把他们移除掉
7.4 条件渲染
- wx:if="true/false"
if else else if 对应微信小程序分别为 wx:if wx:else wx:elif - hidden
在标签上直接加属性hidden hidden="true" - 什么场景下使用哪一个
-
当标签不是频繁的切换显示 优先使用wx:if 直接把标签从页面结构给移除掉
-
当表示频繁的切换显示 优先使用hiddem 通过添加样式的方式来切换显示
7.5 简易的双向绑定
input输入的数据在页面上显示出来
wxml
<input model:value="num" />
js
data:
num:0
7.6 事件的绑定
⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等 不同的组件⽀持不同的事件，具体看组件的说明即可。
具体举例：通过按钮的加和减实现数字的加减同时可以在输入框内输入
wxml
<input type="text" bindinput="bindInput"/>
<button bindtap="add" data-operation="n">+</button>
<button bindtap="del" data-operation="n">-</button>
<view >
num
</view>
js
Page(
/**
* 页面的初始数据
*/
data:
num:0
,
//输入框的input执行逻辑
bindInput(e)
console.log(e.detail.value)
this.setData(
num:e.detail.value
)
,
add(e)
console.log(e)
console.log(e.target.dataset.operation)
this.setData(
num:this.data.num+e.target.dataset.operation.id
)
,
del(e)
console.log(e)
console.log(e.target.dataset.operation)
this.setData(
num:this.data.num-e.target.dataset.operation.id
)
)
8.样式WXSS
WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。 与 CSS 相⽐，
WXSS 扩展的特性有：
- 响应式⻓度单位 rpx
- 样式导⼊
8.1. 尺⼨单位
rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 1rpx = 0.5px = 1物理像素 。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
使⽤步骤：
- 确定设计稿宽度 pageWidth
- 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth。
- 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可
8.2 样式导入
使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。
示例
common.wxss
view
color: aqua;
font-size: 10px;
在demo.wxss中导入common.wxss
/* pages/demo/demo.wxss */
/*
通过@Import 引入 用的是相对路径
*/
@import "../../style/common.wxss"
8.3. 选择器
特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有class=“intro” 的组件 |
| #id | #firstname | 选择拥有id=firstname的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view,checkbox | 选择所有⽂档的 view 组件和所有的 checkbox 组件 |
| nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |
| ::after | view::after | 在 view 组件后边插⼊内容 |
| ::before | view::before | 在 view 组件前边插⼊内容 |
9.常见组件
9.1 text
- ⽂本标签
- 只能嵌套text
- ⻓按⽂字可以复制（只有该标签有这个功能）
- 可以对空格 回⻋ 进⾏编码
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| selectable | boolean | false | 否 | 文本是否可选 |
| user-select | boolean | false | 否 | 文本是否可选，该属性会使文本节点显示为 inline-block |
| decode | boolean | false | 否 | 是否解码 |
<text selectable decode>
111 222
</text>
9.2. image
- 图⽚标签，image组件默认宽度320px、⾼度240px
- ⽀持懒加载
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | 图⽚资源地址 | |
| mode | String | scaleToFill | 图⽚裁剪、缩放的模式 |
| lazy-load | Boolean | false | 图⽚懒加载 |
mode 有效值： mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。
示例
<image src="/icon/home.png" mode="top"></image>
9.3 swiger
微信小程序内置的轮播图组件，其中默认的with为100%，height为150px
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否显⽰⾯板指⽰点 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指⽰点颜⾊ |
| indicator-active-color | Color | #000000 | 当前选中的指⽰点颜⾊ |
| autoplay | Boolean | false | 是否⾃动切换 |
| interval | Number | 5000 | ⾃动切换时间间隔 |
| circular | Boolean | false | s是否循环轮播 |
| current | number | 0 | 当前所在滑块的 index |
| duration | number | 500 | 滑动动画时长 |
| circular | boolean | false | 是否采用衔接滑动 |
| vertical | boolean | false | 滑动方向是否为纵向 |
还有其他属性看官方文档
案例演示
wxml
<!--
1. 轮播图外部容器swagger
2. 每一个轮播项 swagger-item
3. swagger 标签存在默认样式
with 100% height 150px
image 存在默认宽度和高度 320*240
swiper无法实现内容撑开
4. 找出原图的宽和高 等比例给原图定宽高
原图宽度和高度为200*200
swiper 宽度/swiper高度 = 原图的宽度 /原图的高度
swiper的高度= swiper的宽度 *原图的高度/原图的宽度
height=100wx*200/200
-->
<swiper autoplay interval="1000" circular indicator-dots bindtransition >
<swiper-item > <image mode="widthFix" src="/icon/home.png" > </image> </swiper-item>
<swiper-item > <image mode="widthFix" src="/icon/my.png" > </image> </swiper-item>
<swiper-item > <image mode="widthFix" src="/icon/search.png" > </image> </swiper-item>
</swiper>
wxss
swiper
/* width: 100%;
height: calc(100wx*200/200); */
width: 100%;
height: calc(720rpx*200/200)
image
width: 100%;
9.4 navigator
导航组件 类似超链接标签
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| target | String | self | 在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgram |
| url | String | 当前⼩程序内的跳转链接 | |
| open- type | String | navigate | 跳转⽅式 |
open-type 有效值：
| 值 | 说明 |
|---|---|
| navigate | 保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar ⻚⾯ |
| redirect | 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。 |
| switchTab | 跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯ |
| reLaunch | 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯ navigateBack 关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当 前的⻚⾯栈，决定需要返回⼏层 |
| exit | 退出⼩程序，target="miniProgram"时生效 |
9.10 button按钮
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| size | string | default | 否 | 按钮的⼤⼩ |
| type | string | default | 否 | 按钮的样式类型 |
| plain | boolean | false | 否 | 按钮是否镂空，背景⾊透明 |
| disabled | boolean | false | 否 | 是否禁⽤ |
| loading | boolean | false | 否 | 名称前是否带 loading 图标 |
| form- type | string | 否 | ⽤于 组件，点击分别会触发 组件的 submit/reset 事件 | |
| open- type | string | 否 | 微信开放能⼒ |
size的合法值
| 值 | 说明 |
|---|---|
| default | 默认⼤⼩ |
| mini | ⼩尺⼨ |
type的合法值
| 值 | 说明 |
|---|---|
| primary | 绿⾊ |
| default | ⽩⾊ |
| warn | 红⾊ |
form-type 的合法值
| 值 | 说明 |
|---|---|
| submit | 提交表单 |
| reset | 重置表单 |
open-type 的合法值
| 值 | 说明 |
|---|---|
| contact | 打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息 |
| share | 触发⽤⼾转发，使⽤前建议先阅读使⽤指引 |
| getPhoneNumber | 获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息 |
| getUserInfo | 获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息 launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数 |
| penSetting | 打开授权设置⻚ |
| feedback | 打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登 录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容 |
具体案例
wxml
<button size="default" > 默认大小</button>
<button size="mini">小尺寸</button>
<button type="primary">绿色</button>
<button type="default" disabled>白色</button>
<button type="warn" >红色</button>
<button type="warn" plain>plain 红色</button>
<button loading type="primary">加载中</button>
<button plain type="warn">镂空</button>
<!--
button开发
open-type
contact:直接打开客服对话功能 需要的微信小程序后台配置
share 转发当前的小程序要微信朋友中 不能大小程序分享到朋友圈
getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号 没有权限获取用户的手机号码
使用方式：1.绑定一个事件 bindgetphonenumber
2.在事件的回调函数中通过参数来获取信息
3.获取到的用户信息是加密过的 需要自己搭建后台服务器，在后台服务器中解析电话号码 返回到小程序中就可以看到消息了
getUserInfo 获取当前用户的个人信息
1. 使用方法类似于获取用户的个人信息
2.可以直接获取 不存在加密字段
launchApp 在小程序中直接打开app
1.需要在APP中通过APP的某个链接打开小程序
2.在小程序中通过这个功能直接打开app
举例 京东app和京东小程序
openSetting 打开小程序内置的授权页面
授权页面中只会出现用户曾经点击过的页面
feedback 打开小程序内置的意见反馈页面 只能通过真机调试的功能打开
-->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
js
微信小程序基础入门