初始小程序
一，如何学习微信小程序
➢ 借助官方文档学习。 微信小程序有非常完善的官方文档，可以在官方文档上查到我们需要的所有东西。
链接: link
➢ 可以通过社区进行学习，社区提供了很多优质的资源，可以加快小程序的开发效率，提升小程序的开发体验。
链接: link
二，小程序的申请和创建流程
账号的申请
开发小程序首先要进行小程序的账号申请。
链接: link
下载开发工具
这里大家可以从官方网站下载最新版的开发工具。因为这个开发工具一直在更新，所以建议大家直接从官网下载。
链接: link
获取AppId
链接: link
三， 项目的目录结构
➢ pages:
■ wxml: 编写小程序界面结构的地方
■ wxss: 编写小程序样式的地方
■ json：编写界面配置的地方
■ js：编写界面逻辑的地方
➢ utils: 编写工具类的地方
➢ app.js：创建程序实例的位置
➢ app.json: 编写全局配置地方
➢ app.wxss: 编写全局样式的地方
➢ project.config.json: 项目的配置文件
➢ sitemap.json：配置哪些网站可以被检索到
四，配置tabbar
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/icons/index.png",
"selectedIconPath": "assets/icons/index-active.png"
},{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath": "assets/icons/wode.png",
"selectedIconPath": "assets/icons/wode-active.png"
}]
},
五，小程序模板语法WXML
数据定义
data: {
msg:"hello world",
num: 18,
},
引用数据
通过{{}}的方式可以引用数据。
小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。
逻辑渲染
WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
使用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。
<view hidden="{{condition}}">
隐藏
</view>
列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
<!-- array 是一个数组 -->
<view wx:for="{{array}}">
{{index}}: {{item.name}}
</view>
<!-- 对应的脚本文件
Page({
data: {
array: [{
name: '天亮教育',
}, {
name: '尚云科技'
}]
}
})
-->
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.name}}
</view>
key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容，
wx:key 的值以两种形式提供：
- 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
Template
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，如：
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。
<!-- msgList:[
{
index: 0,
msg: '这是一段模板',
time: '2020-10-10'
}
] -->
<view wx:for="{{msgList}}">
<template is="msgItem" data="{{...item}}"></template>
</view>
引用
WXML 提供两种文件引用方式import和include。
Import
可以在该文件中使用目标文件定义的 template
在 item.wxml 中定义了一个叫 item的 template ：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用 item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: '测试'}}"/>
需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
例如：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template 。
include
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。
index.wxml
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
header.wxml
<!-- header.wxml -->
<view> header </view>
footer.wxml
<!-- footer.wxml -->
<view> footer </view>
六， 小程序样式wxss
WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。
WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。
尺寸单位
在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。
1rpx = （屏幕宽度/750）px
在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px
样式的导入
在小程序中，样式引用是这样写：
@import './test_0.wxss'
由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。
七， 小程序中的JS
小程序中的js和浏览器中和node中的区别
浏览器中JS：
➢ ES
➢ DOM
➢ BOM
Node中的JS：
➢ ES
➢ NPM
➢ Native
小程序中的JS：
➢ ES
➢ 小程序框架
➢ 小程序API
小程序中js的模块化
在小程序中实现JS模块化，和node中、ES6中是一致的，大家还可以使用之前的方式进行JS的模块化编程。
小程序中js的加载执行顺序
小程序的执行的入口文件是 app.js 。并且会根据其中 require 的模块顺序决定文件的运行顺序。
案例：JS文件模块化
小程序中js的执行环境
小程序目前可以运行在三大平台：
- iOS平台，包括iOS9、iOS10、iOS11
- Android平台
- 小程序IDE
八， 小程序中的数据渲染
我们看看小程序是如何把脚本里边的数据渲染在界面上的。
WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量。
<view>{{ msg }}</view>
在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”。
Page({
onLoad: function () {
this.setData({ msg: 'Hello World' })
}
})
从这个例子我们可以看到3个点：
1.渲染层和数据相关。
2.逻辑层负责产生、处理数据。
3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。
九， 程序和界面
宿主环境提供了 App() 构造器用来注册一个程序App，需要留意的是App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。
➢ onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
➢ onShow：当小程序启动，或从后台进入前台显示，会触发 onShow
➢ onHide：当小程序从前台进入后台，会触发 onHide
➢ onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
➢ 其他字段：可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问。
小程序全局数据
我们在前面说到小程序的JS脚本是运行在JsCore的线程里，小程序的每个页面各自有一个WebView线程进行渲染，所以小程序切换页面时，小程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程中。
在上文中说道App实例是单例的，因此不同页面直接可以通过App实例下的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。
在其他JS中可以通过getApp()获取App实例，之后可以获取到定义在App实例上的数据。
Page
一个小程序可以有很多页面，每个页面承载不同的功能，页面之间可以互相跳转。
生命周期
onLoad：生命周期函数–监听页面加载，触发时机早于onShow和onReady
onReady：生命周期函数–监听页面初次渲染完成
onShow：生命周期函数–监听页面显示，触发事件早于onReady
onHide：生命周期函数–监听页面隐藏
onUnload：生命周期函数–监听页面卸载
常见的事件类型
➢ touchstart 手指触摸动作开始
➢ touchmove 手指触摸后移动
➢ touchcancel 手指触摸动作被打断，如来电提醒，弹窗
➢ touchend 手指触摸动作结束
➢ tap 手指触摸后马上离开
➢ longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
➢ longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
➢ transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
➢ animationstart 会在一个 WXSS animation 动画开始时触发
➢ animationiteration 会在一个 WXSS animation 一次迭代结束时触发
➢ animationend 会在一个 WXSS animation 动画完成时触发
阻止事件冒泡
在小程序中除了通过bind之外，还可以通过catch进行事件绑定，通过catch绑定的事件不会触发事件冒泡。
事件捕获
事件的触发分为两个阶段，首先是捕获阶段，其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可以通过capture-bind进行事件绑定。
事件传参
在小程序中进行事件传参不能像传统的Web项目中一样，在括号里写参数。在小程序中需要在标签上通过data-方式定义事件所需的参数。
<!-- data-参数名=’参数值’ -->
<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>
每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路由传递的参数。
handleTap(e){
console.log("执行了点击事件");
// 通过currentTarget中的dataset属性可以获取时间参数
console.log(e.currentTarget.dataset.msg);
}
关于这个事件对象其他属性
➢ type 事件类型
➢ timeStamp 页面打开到触发事件所经过的毫秒数
➢ target 触发事件的组件的一些属性值集合
➢ currentTarget 当前组件的一些属性值集合
➢ detail 额外的信息
➢ touches 触摸事件，当前停留在屏幕中的触摸点信息的数组
➢ changedTouches 触摸事件，当前变化的触摸点信息的数组
这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
