微信小程序开发（一）：开发环境、工具及配置准备

1. 课程先容

   本次课程分为两个部分。
1.1. 微信小法式根本

   首要讲授微信小法式的根本利用以及相关概念常识
1.2. bilibili微信小法式

   一个基于小法式的bilibili利用，加深对微信小法式根本常识的领会。
2. 小法式先容

微信小法式是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上利用的利用，首要供给给企业、政府、媒体、其他构造或小我的开辟者在微信平台上供给办事。
微信小法式和微信的原生功用利用在本质上是一样的——它们都是Web App。Web App就是一种经过H5页面技术实现的，和Native App的功用和界面几近一样的手机App形状。很多商家和企业为了节省技术职员和资金的投入，城市挑选利用Web App建造工具，免费快速建造自己的Web App。
停止2018年3月，微信小法式用户范围冲破4亿，小游戏类微信小法式占比达28%。
2.1. 微信小法式的上风

很多人做微信公众号，而非App，由于App推行本钱太高。这致使公众号现在更像是媒体化的平台。微信的本意是要供给办事，所以推出了办事号，可是办事号也没到达预期。微信小法式的上风：
一是微信有海量用户，而且粘性很高，在微信里开辟产物更轻易触达用户；
二是推行app 或公众号的本钱太高。
三是开辟适配本钱低。
四是轻易小范围试错，然后快速迭代。
五是跨平台。
究竟上，利用号并非微信初创，之前百度推出过利用号，搜狐推出过快站，但腾讯将这件工作做成功的几率却是最大
2.2. 微信小法式对于创业者的上风

1、APP流量本钱的急剧爬升
2、移动互联网格式根基已定，用户首要需求场景已被巨头独霸
3、面向一切产物对用户时候的合作
2.3. 体验

检察小法式示例源码




3. 开辟情况的预备

3.1. 注册账号

拜候注册页面，耐心完成注册即可。
3.2. 获得APPID

由于前期挪用微信小法式的接口等功用，需要讨取开辟者的小法式中的APPID，所以在注册成功后，可登录，然后获得APPID。
登录，成功后可看到以下界面


然后复制你的APPID,静静的保存起来，不要给他人看到 。


3.3. 开辟工具

严酷来说，微信小法式支持一切的开辟工具，可是从效力和便当性来说，保举以下

• vs code 下载地址
  
• 微信自己的微信小法式开辟工具 下载地址
  

4. 我的第一个微信小法式

下面起头演示若何建立我的第一个微信小法式
4.1. 安装微信小法式开辟者工具

下载好微信小法式开辟者工具后，间接双击安装，一向点击下一步即可。 安装好后，界面以下


4.2. 挑选小法式项目



4.3. 新建项目



4.4. 建立项目



4.5. 成功



5. 微信开辟工具深入先容

工具先容


6. 小法式结构目录

小法式框架的方针是经过尽能够简单、高效的方式让开辟者可以在微信中开辟具有原生 APP 体验的办事。
小法式框架供给了自己的视图层描写说话 WXML 和 WXSS，以及 JavaScript，并在视图层与逻辑层间供给了数据传输和事务系统，让开辟者可以专注于数据与逻辑。
官网
6.1. 小法式文件结构和传统web对照

结构	传统web	微信小法式
结构	HTML	WXML
款式	CSS	WXSS
逻辑	Javascript	Javascript
设置	无	JSON

经过以上对照得出，传统web 是三层结构。而微信小法式 是四层结构，多了一层 设置.json
6.2. 根基的项目目录



7. 设置先容

一个小法式利用法式会包括最根基的两种设置文件。一种是全局的 app.json 和 页面自己的 page.json
留意：设置文件中不能出现正文
7.1. 全局设置app.json

app.json 是当前小法式的全局设置，包括了小法式的一切页面途径、界面表示、收集超不时候、底部 tab 等。普通快速启动项目里边的 app.json 设置

1. {
2.   "pages":[
3.     "pages/index/index",
4.     "pages/logs/logs"
5.   ],
6.   "window":{
7.     "backgroundTextStyle":"light",
8.     "navigationBarBackgroundColor": "#fff",
9.     "navigationBarTitleText": "WeChat",
10.     "navigationBarTextStyle":"black"
11.   }
12. }

复制代码

字段的寄义

• pages字段 —— 用于描写当前小法式一切页面途径，这是为了让微信客户端晓得当前你的小法式页面界说在哪个目录。
  
• window字段 —— 界说小法式一切页面的顶部布景色彩，笔墨色彩界说等。
  
• 完整的设置信息请参考 app.json设置
  

7.2. page.json

这里的 page.json 实在用来暗示页脸孔录下的 page.json 这类和小法式页面相关的设置。
开辟者可以自力界说每个页面的一些属性，如顶部色彩、能否答应下拉革新等等。
页面的设置只能设备 app.json 中部分 window 设置项的内容，页面中设置项会覆盖 app.json 的 window 中不异的设置项。

属性	范例	默许值	描写
navigationBarBackgroundColor	HexColor	#000000	导航栏布景色彩，如 #000000
navigationBarTextStyle	String	white	导航栏题目色彩，仅支持 black / white
navigationBarTitleText	String	导航栏题目笔墨内容
backgroundColor	HexColor	#ffffff	窗口的布风景
backgroundTextStyle	String	dark	下拉 loading 的款式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	能否全局开启下拉革新。 详见 Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事务触发时距页面底部间隔，单元为px。 详见 Page.onReachBottom
disableScroll	Boolean	false	设备为 true 则页面整体不能高低转动；只在页面设置中有用，没法在 app.json 中设备该项

8. 视图层

WXML（WeiXin Markup Language）是框架设想的一套标签说话，连系根本组件、事务系统，可以构建出页面的结构。
8.1. 数据绑定

8.1.1. 普通写法

1. <view> {{ message }} </view>
2. Page({
3.   data: {
4.     message: 'Hello MINA!'
5.   }
6. })

复制代码

8.1.2. 组件属性

1. <view id="item-{{id}}"> </view>
2. Page({
3.   data: {
4.     id: 0
5.   }
6. })

复制代码

8.1.3. bool范例

不要间接写 checked="false"，其计较成果是一个字符串

1. <checkbox checked="{{false}}"> </checkbox>

复制代码

8.2. 运算

8.2.1. 三元运算

1. <view hidden="{{flag ? true : false}}"> Hidden </view>

复制代码

8.2.2. 算数运算

1. <view> {{a + b}} + {{c}} + d </view>
2. Page({
3.   data: {
4.     a: 1,
5.     b: 2,
6.     c: 3
7.   }
8. })

复制代码

8.2.3. 逻辑判定

1. <view wx:if="{{length > 5}}"> </view>

复制代码

8.2.4. 字符串运算

1. <view>{{"hello" + name}}</view>
2. Page({
3.   data:{
4.     name: 'MINA'
5.   }
6. })

复制代码

8.2.5. 留意

花括号和引号之间倘使有空格，将终极被剖析成为字符串
8.3. 列表衬着

8.3.1. wx:for

项的变量名默以为 item wx:for-item 可以指定数组当前元素的变量名
下标变量名默以为 index wx:for-index 可以指定数组当前下标的变量名

1. <view wx:for="{{array}}">
2.   {{index}}: {{item.message}}
3. </view>
4. Page({
5.   data: {
6.     array: [{
7.       message: 'foo',
8.     }, {
9.       message: 'bar'
10.     }]
11.   }
12. })

复制代码

8.3.2. wx:for

衬着一个包括多节点的结构块  block终极不会酿成实在的dom元素

1. <block wx:for="{{[1, 2, 3]}}">
2.   <view> {{index}}: </view>
3.   <view> {{item}} </view>
4. </block>

复制代码

8.3.3. wx:key

进步效力利用的
8.4. 条件衬着

8.4.1. wx:if

在框架中，利用 wx:if="{{condition}}" 来判定能否需要衬着该代码块：

1. <view wx:if="{{condition}}"> True </view>

复制代码

8.4.2. hidden

1. <view hidden="{{condition}}"> True </view>

复制代码

类似 wx:if
频仍切换 用 hidden
不常利用 用 wx:if
9. WXSS

WXSS(WeiXin Style Sheets)是一套款式说话，用于描写 WXML 的组件款式。
与 CSS 相比，WXSS 扩大的特征有：

• 尺寸单元
  
• 款式导入
  

9.1. 尺寸单元

• rpx（responsive pixel）: 可以按照屏幕宽度停止自顺应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，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 作为视觉稿的标准。
留意： 在较小的屏幕上不成避免的会有一些毛刺，请在开辟时只管避免这类情况。
9.2. 款式导入

利用@import语句可以导入外联款式表，@import后跟需要导入的外联款式表的相对途径，用;暗示语句竣事。
示例代码：

1. /** common.wxss **/
2. .small-p {
3.   padding:5px;
4. }
5. /** app.wxss **/
6. @import "common.wxss";
7. .middle-p {
8.   padding:15px;
9. }

复制代码

9.3. 内联款式

框架组件上支持利用 style、class 属性来控制组件的款式。

• style：静态的款式同一写到 class 中。style 接收静态的款式，在运转时会停止剖析，请只管避免将静态的款式写进 style 中，免得影响衬着速度。
  

1. <view style="color:{{color}};" />

复制代码

• class：用于指定款式法则，其属性值是款式法则中类挑选器名(款式类名)的调集，款式类名不需要带上.，款式类名之间用空格分隔。
  

1. <view class="normal_view" />

复制代码

9.4. 挑选器

今朝支持的挑选器有：

挑选器	样例	样例描写
.class	.intro	挑选一切具有 class="intro" 的组件
#id	#firstname	挑选具有 id="firstname" 的组件
element	view	挑选一切 view 组件
element, element	view, checkbox	挑选一切文档的 view 组件和一切的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

9.5. 全局款式与部分款式

界说在 app.wxss 中的款式为全局款式，感化于每一个页面。在 page 的 wxss 文件中界说的款式为部分款式，只感化在对应的页面，并会覆盖 app.wxss 中不异的挑选器。
10. 根基组件

小法式供给了常用的标签组件用于构建页面

组件
10.1. view

类似 div

属性名	范例	默许值	说明
hover-class	String	none	指定按下去的款式类。当 hover-class="none" 时，没有点击态结果

10.1.1. 代码

1. <view hover-class="h-class">
2.   点击我试试
3.   </view>
4.   <!-- wxss -->
5.   .h-class{
6.     background-color: yellow;
7.   }

复制代码

10.2. text

显现普通的文本 text只能嵌套text

属性名	范例	默许值	说明
selectable	Boolean	false	文本能否可选
decode	Boolean	false	能否解码

10.2.1. 代码

1. <text selectable="{{false}}" decode="{{false}}">
2.     普 通
3.   </text>

复制代码

10.3. image

图片标签，image组件默许宽度320px、高度240px

留意：该标签 实在是 web中的 图片标签 和 布景图片的连系！！！ 而且不支持之前的web中的布景图片的写法！！！

属性名	范例	默许值	说明
src	String	图片资本地址，支持云文件ID（2.2.3起）
mode	String	'scaleToFill'	图片裁剪、缩放的形式
lazy-load	Boolean	false	图片懒加载。只针对page与scroll-view下的image有用

mode 有用值：
mode 有 13 种形式，其中 4 种是缩放形式，9 种是裁剪形式。

形式	值	说明
缩放	scaleToFill	不连结纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	连结纵横比缩放图片，使图片的长边能完全显现出来。
缩放	aspectFill	连结纵横比缩放图片，只保证图片的短边能完全显现出来。
缩放	widthFix	宽度稳定，高度自动变化，连结原图宽高比稳定
裁剪	top	不缩放图片，只显现图片的顶部地区
裁剪	bottom	不缩放图片，只显现图片的底部地区
裁剪	center	不缩放图片，只显现图片的中心地区
裁剪	left	不缩放图片，只显现图片的左侧地区
裁剪	right	不缩放图片，只显现图片的右侧地区
裁剪	top left	不缩放图片，只显现图片的左上边地区
裁剪	top right	不缩放图片，只显现图片的右上边地区
裁剪	bottom left	不缩放图片，只显现图片的左下边地区
裁剪	bottom right	不缩放图片，只显现图片的右下边地区

10.4. swiper

微信内置有轮播图组件

默许宽度 100% 高度 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	能否采用跟尾滑动

10.4.1. swiper

滑块视图容器。
10.4.2. swiper-item

滑块

默许宽度和高度都是100%
10.5. 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"时生效

10.6. video

视频。该组件是原生组件，利用时请留意相关限制。

属性名	范例	默许值	说明
src	String	要播放视频的资本地址，支持云文件ID（2.2.3起）
duration	Number	指定视频时长
controls	Boolean	true	能否显现默许播放控件（播放/停息按钮、播放进度、时候）
autoplay	Boolean	false	能否自动播放
loop	Boolean	false	能否循环播放
muted	Boolean	false	能否静音播放

1. <video src="{{src}}" controls></video>

复制代码

11. 自界说组件

小法式答应我们利用自界说组件的方式来构建页面。
自界说组件
11.1. 建立自界说组件

类似于页面，一个自界说组件由 json wxml wxss js 4个文件组成

11.1.1. 声明组件

首先需要在 json 文件中停止自界说组件声明

1. {
2.   "component": true
3. }

复制代码

11.1.2. 编辑组件

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件款式

留意：在组件wxss中不应利用ID挑选器、属性挑选器和标签名挑选器。

1. <!-- 这是自界说组件的内部WXML结构 -->
2. <view class="inner">
3.   {{innerText}}
4.     <slot></slot>
5. </view>
6. /* 这里的款式只利用于这个自界说组件 */
7. .inner {
8.   color: red;
9. }

复制代码

11.1.3. 注册组件

在自界说组件的 js 文件中，需要利用 Component() 来注册组件，并供给组件的属性界说、内部数据和自界说方式

1. Component({
2.   properties: {
3.     // 这里界说了innerText属性，属性值可以在组件利用时指定
4.     innerText: {
5.       type: String,
6.       value: 'default value',
7.     }
8.   },
9.   data: {
10.     // 这里是一些组件内部数据
11.     someData: {}
12.   },
13.   methods: {
14.     // 这里是一个自界说方式
15.     customMethod: function(){}
16.   }
17. })

复制代码

11.2. 利用自界说组件

首先要在页面的 json 文件中停止援用声明。还要供给对应的组件名和组件途径

1. {
2.     // 援用声明
3.   "usingComponents": {
4.     // 要利用的组件的称号     // 组件的途径
5.     "component-tag-name": "path/to/the/custom/component"
6.   }
7. }

复制代码