微信⼩程序基础知识（⼀）
商务英语是学什么
资料来源：《微信⼩程序》⿊马程序员编著
⼀、微信⼩程序介绍：
微信⼩程序是⼀种不需要安装即可使⽤的应⽤，⽤户只要“扫⼀扫”或“搜⼀搜”即可打开应⽤，⽆须安装或卸载。微信⼩程序运⾏于微信之上，它的交互类似于⼿机原⽣应⽤，但是每个应⽤的体积⾮常⼩（⽬前上限是2048kb），具有⽆须安装、触⼿可及、⽤完即⾛、⽆须卸载的特点。
微信⼩程序借鉴了现有的Web技术，通过独⽴的运⾏环境实现了跨平台，并提供了接近原⽣APP的使⽤体验，具有明显的优势。为了降低微信⼩程序的开发成本，提⾼开发效率，微信⼩程序的开发⽅式与Web APP相似，即通过WXML(类似HTML)、WXSS(类似CSS)和JavaScript进⾏开发，(⼩程序也有⼀套脚本语⾔，为WXS(WeiXin Script)，语法与JavaScript类似⼜存在少量差异，具体可以查看⼩程序官⽅⼿册对WXS的说明)并且提供了丰富的组件、API（）和接⼝，从⽽具有更接近原⽣APP的使⽤体验。微信⼩程序相⽐Web APP也有⼀些不⾜，它不⽀持HTML标签和DOM操作，对CSS的⽀持也有限，⼀些成熟的前端库和框架(如jQuery、Vue.js)也⽆法使⽤，如果将Web APP修改成微信⼩程序需要进⾏⼤量的改动。微信⼩程序适合开发⼀些业务逻辑简单、低频次使⽤、对性能要求不⾼的应⽤。
开发环境的搭建：微信公众平台（）中选择⼩程序并注册⼀个⼩程序账号-->登录注册的账号-->开发⼯具中选择稳定版本的⼯具进⾏安装(涉及到的其他信息后续会介绍到)-->跳转的⽹页有⼯具的介绍
项⽬创建：打开已安装的微信开发者⼯具-->选择⼩程序-->完善项⽬的信息(选择不使⽤云服务)-->此时⼀个带有模板的项⽬已创建
项⽬⽬录介绍：app.js是应⽤程序的逻辑⽂件；app.json是应⽤程序的配置⽂件(进⾏页⾯路径、窗⼝表现、底部tab栏···)；
app.wxss是应⽤程序的公共样式⽂件；fig.json是项⽬的配置⽂件；sitemap.json⽤来配置⼩程序及其页⾯是否允许被微信索引。；index⽬录和logs⽬录是两个页⾯，每个页⾯包含四个⽂件，分别是结构⽂件、样式⽂件、逻辑⽂件和配置⽂件；
⼆、页⾯和语法介绍
WXML和WXSS的语法：WXML和WXSS的语法与HTML和WXSS类似，这⾥做简单的介绍，后续会慢慢的补充。
常见的页⾯组件
标签功能标签功能
<view>视图容器<icon>图标⽂件
<text>⽂本域<checkbox>复选框
<button>按钮<radio>单选框
<image>图⽚<input>输⼊框
<form>表单<progress>进度条
标签功能标签功能
input组件的type属性
可选值说明
text⽂本输⼊键盘(默认)
广州咖啡
number数字输⼊键盘
idcard⾝份证输⼊键盘
digit带⼩数点的数字键盘
WXSS选择器
绯闻女孩第二季下载选择器⽰例说明
.ainer选择所有class="container"的组件
#id#id选择id="#id"的组件
element view、text、
button
选择所有view组件
element,element（并集）view、text选择所有
::after（伪类选择器）view::after在view组件内的后⾯插⼊内容
::before（伪类选择器）view::before在view组件内的前⾯插⼊内容
尺⼨单位：移动端⽹页像素单位的换算难点在于有物理像素和逻辑像素两种单位，物理像素是指屏上有多少个像素，⽽逻辑像素是指WXSS中使⽤的像素单位。⼩程序中引⼊rpx规定了任何⼿机屏幕的宽度都为750rpx(逻辑像素)，由⼩程序内部负责将逻辑像素转换为当前⼿机中的物理像素。
样式导⼊和公共样式⽂件：在WXSS中可以使⽤@import语句导⼊外联样式表。语法：@import “路径”；可以将多个页⾯的公共样式⽂件写在app.wxss中，页⾯样式的优先级⾼于公共样式⽂件，发⽣冲突时会覆盖公共样式⽂件。
配置⽂件：⼩程序的每个页⾯均可以使⽤json⽂件对页⾯的效果进⾏配置。页⾯配置分为页⾯级和应⽤级，pages/index/index.json 时页⾯级配置⽂件，⽽app.json是应⽤级配置⽂件。
常⽤的页⾯级配置
属性说明
navigationBarBackgroundColor导航栏背景颜⾊，默认为#000000
navigationBarTextStyle导航栏标题颜⾊，仅⽀持black、white（默认）
navigationBarTitleText导航栏的标题⽂字内容
backgroundColor窗⼝的背景⾊，默认为#ffffff
backgroundTextStyle下拉loading的样式，仅⽀持dark（默认）、light
enablePullDownRefresh是否全局开启下拉刷新，默认为fal
onReachBottomDistance 页⾯上拉触底事件触发时距页⾯底部距离（单位为px），默认为50
disableScroll默认为fal。设为true时，页⾯整体不能上下滚动
若将enablePullDownRefresh设为true，页⾯可以下拉刷新，当下拉刷新操作执⾏时，就会触发下拉刷新事件onPullDownRefresh，在pages/index/index.js⽂件中可以找到该事件的处理函数。onReachBottomDistance主要⽤于开发⾃动加载更多的功能，也就是当页⾯中的内容⾮常长的时候，为了加快加载速度，并不是⼀次性加载所有的数据，⽽是先加载⼀部分数据将页⾯填满，知道出现滚动条，页⾯可以向上滚动。当⽤户向上拉时，如果快要到达底部了，就⽴即加载后⾯的数据。因此，onReachBottomDistance的值越⼤，加载的时机越提前。如果达到了给定的值，就会触发上拉触底事件onReachBottom，在pages/index/index.js⽂件中可以找到该事件的处理函数。
照顾好我的眼睛应⽤级配置⽂件(app.json)
属性说明
化学翻译
pages页⾯路径列表
window全局的默认窗⼝表现
tabBar底部tab栏的表现
networkTimeout⽹络超时时间
伴音
debug是否开启调试模式，默认为fal
requireBackgroundModes需要在后台使⽤的能⼒，如⾳乐播放新东方魏公村校区
plugins使⽤到的插件
上述属性中，pages⽤来在app.json中设置页⾯；window的值是⼀个对象，可以将页⾯级的配置写在window中，作为应⽤级配置使⽤，从⽽⼀次设置多个页⾯，且优先级低于页⾯级配置；tabBar、plugins和requiredBackgroundModes后续会介绍；debug开启后可以在控制台中输出调试信息，帮助开发者快速定位到⼀些常见的问题。networkTimeout可以设置⽹络请求过程中的超时时间，详细如下表
networkTimeout属性
属性类型说明
request quert()的超时时间(ms)，默认为60000
connectSocket tSocket()的超时时间(ms)，默认为60000
uploadFile Number wx.uploadFile()的超时时间(ms)，默认为60000
downloadFile Number wx.downloadFile()的超时时间(ms)，默认为60000
上表中，以wx.开始的是⼩程序中的API，如wx.request()⽤于发送⽹络请求，关于这些API的具体使⽤⽅法后⾯会逐渐介绍。
页⾯逻辑：在项⽬中，类似pages/index/index.js⽂件⽤于编写页⾯逻辑。⽂件中的Page()函数⽤来注册⼀个页⾯，该函数的参数是⼀个对象，通过该对象可以指定页⾯的初始数据、⽣命周期函数、事件处理函数等。
Page()函数参数对象的属性
属性类型说明
培训会计
data Object页⾯的初始数据
onLoad Function⽣命周期回调函数，监听页⾯加载
onReady Function⽣命周期回调函数，监听页⾯初次渲染完成
onShow Function⽣命周期回调函数，监听页⾯显⽰
onHide Function⽣命周期回调函数，监听页⾯隐藏
onUnload Function⽣命周期回调函数，监听页⾯卸载
onPullDownRefresh Function页⾯事件处理函数，监听⽤户下拉动作
onReachBottom Function页⾯事件处理函数，页⾯上拉触底
onShareAppMessage Function页⾯事件处理函数，⽤户单击右上⾓的分享按钮
onPageScroll Function页⾯事件处理函数，页⾯滚动会连续触发
其他Any开发者可以添加任意的函数或者数据，在页⾯的函数中可以通过this.*来访问
⽣命周期函数： onLoad：页⾯加载时触发，⼀个页⾯只会调⽤⼀次。通过参数options可以获取打开当前页⾯路径中的参数。
onReady：页⾯初次渲染完成的时候调⽤。⼀个页⾯只会调⽤⼀次，代表页⾯已经准备妥当，此时可以与视图层进⾏交互。onShow：当页⾯显⽰时触发。如从后台切⼊前台时触发。onHide：当页⾯隐藏时触发。如从前台切⼊后台时触发。onUnload：页⾯卸载时触
发。如使⽤路由API中的wx.redirectTo()或wx.navigateBack()跳转其他页⾯时触发。
页⾯事件函数：onPullDownRefresh需要在配置⽂件中将enablePullDownRefresh设为true才会有效。
组件事件函数：(1)事件对象：通过事件对象e，可以获取type（事件类型）、timestamp（事件⽣成时的时间戳）、target（触发事件的组件的⼀些属性值集合）、currentTarget（当前组件的属性值集合）、detail（额外的信息）等信息。注意：target和
currentTarget在⽗⼦组件嵌套的情况下会有分明。(2)常⽤事件：⼩程序有明确的视图层和逻辑层的划分，视图层使⽤WXML和WXSS编写，有组件来进⾏展⽰；逻辑层使⽤JavaScript编写，但⼩程序并⾮运⾏在浏览器环境中，不能使⽤BOM和DOM。通过事件可以实现以视图层到逻辑层的通信。(3)事件绑定和冒泡：组件绑定事件时，有两种⽅式，分别是“bind事件类型”和“catch事件类型”。bind⽅式不会阻⽌事件向上冒泡，⽽catch⽅式阻⽌冒泡事件向上冒泡。
常⽤的冒泡事件
事件类型触发条件
touchstart⼿指触摸动作开始
touchmove⼿指触摸后移动
中国老人tueoldan
touchcancel⼿指触摸动作被打断，如来电提醒、弹窗
touchend⼿指触摸动作结束
tap⼿指触摸后马上离开
longpress⼿指触摸后，超过350ms再离开。如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
注册程序：在⼩程序启动、显⽰、隐藏时执⾏某些操作，可以通过App()函数来实现。App()函数⽤于注册⼩程序，它接受⼀个对象参数，通过参数指定⼩程序的⽣命周期回调等。App()函数必须在app.js中调⽤且只能调⽤⼀次，不然会出现⽆法预期的后果。
App()函数参数对象的属性
属性类型说明
onLaunch Function⽣命周期回调，监听⼩程序初始化(全局只触发⼀次)
onShow Function⽣命周期回调，监听⼩程序显⽰
onHide Function⽣命周期回调，监听⼩程序隐藏
onError Function错误监听函数，⼩程序发⽣脚本错误，或者API调⽤失败时触发onPageNotFound Function页⾯不存在监听函数，⼩程序要打开的页⾯不存在时触发
其他Any可以添加⼀些作为所有页⾯共享的数据，通过getApp()获取⼩程序App实例即可三、基本知识介绍
“{{}}”双⼤括号和tData()函数：在WXML中使⽤双⼤括号“{{}}”可以实现数据绑定和算术计算，这种语法⼜称为Mustache语法。双⼤括号中可以写⼀个变量名，如{{result}}，在页⾯打开后会到Page（{data:{result:""},···}）中读取result的值，显⽰在页⾯中。注意：不能通过直接赋值的⽅式来改变页⾯中{{result}}的值，如sult=str。需要通过this.tData()⽅法来实现，该⽅法的参数是⼀个对象。
同⼀组件的相同事件：可以为多个相同组件绑定相同事件处理函数，只需为不同的组件设置不同id或datat即可。具体为通过事件对象的属性集实现。
条件渲染和<block>：微信⼩程序中通过wx:if语法来定义条件渲染。此外，还⽀持wx:if和wx:el以及wx:if、wx:elif和wx:el的结构语法。有时控制⼀块区域是否出现则使⽤<block>标签会更加⽅便。<block>标签并不是⼀个组件，仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性。
列表渲染：例：<label wx:for="{{ranges}}" wx:key="value"><checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}</label>；wx:for⽤作列表渲染，，⽤于根据给定的数组重复渲染该组件。在列表渲染标签内，可以使⽤item表⽰数组的当前项，使⽤index表⽰当前项的下标。wx:key表⽰每⼀项的唯⼀标识，值为value表⽰将每⼀项的value属性作为唯⼀标识，也可以⽤保留关键字*this表⽰将每⼀项本⾝作为唯⼀标识。列表渲染中，设置wx:key可以在数据改变后在页⾯中重新渲染时，使原有的组件保持⾃⾝的状态，⽽不是重新创建且提⾼了列表渲染时的效率。
swiper组件：swiper组件是滑块视图容器，语法：<swiper><swiper-item></swiper-item></swiper>⼩程序中没有严格规定<swiper-item>标签内可以嵌套哪些组件，如果放⼊image组件，就实现了轮播图的效果；如果放⼊⼀块页⾯内容，就可以实现标签页切换的效
果。
swiper组件的常⽤属性
属性类型说明
indicator-dots Boolean是否显⽰⾯板指⽰点，默认为fal
indicator-color Color指⽰点颜⾊，默认为rgba(0,0,0,3)
indicator-
active-color
Color当前选中的指⽰点颜⾊，默认为#000000
autoplay Boolean是否⾃动切换，默认为fal
current Number当前所在滑块的index，默认为0
current-item-id String当前所在滑块的item-id（不能同时指定current）
interval Number⾃动切换时间间隔（ms），默认为5000
duration Number滑动动画市场（ms），默认为500
circular Boolean是否采⽤衔接滑动，默认为fal
vertical Boolean滑动⽅向是否为纵向，默认为fal
bindchange EventHandle current改变时会触发change事件
include代码引⽤：单标签，在wxml⽂件中可以使⽤<include>标签引⽤其他⽂件中的代码，相当于把引⽤的代码复制到<include>标签的位置。<include>标签可以⽅便的查找代码和减少重复的代码。语法：<include src="path" />。
scroll-view组件：scroll-view组件⽤于实现可滚动视图区域。⼀般来说，当页⾯的⾼度超过了显⽰区域的⾼度时，先设置外层容器的⾼度，使之低于内部的⾼度，然后在外层容器的样式中设置overflow-y:scroll，就可以实现上下滚动了。但是这种⽅式只是从样式上实现了滚动，如果需要在滚动到顶部或底部时触发事件，就需要⼿动编写代码来实现了。
scroll-view组件常⽤属性
属性类型说明
scroll-x Boolean允许横向滚动，默认为fal
scroll-y Boolean允许纵向滚动，默认为fal
scroll-top Number/String设置竖向滚动条的位置
scroll-left Number/String设置横向滚动条的位置
digital是什么意思
bindscrolltoupper EventHandle添加到顶部/左边时触发的事件
bindscrolltolower EventHandle添加到底部/右边时触发的事件
scroll-with-
animation
Boolean在设置滚动条位置时是否使⽤动画过渡
scroll-into-view String 设置哪个⽅向可滚动，则在哪个⽅向滚动到该元素。值应为某⼦元素id（id不能以数字开头）
bindscroll EventHandle滚动时触发的事件
滚动事件对象属性
属性说明scrollLeft横向滚动条左侧到视图左边的距离
scrollTop纵向滚动条上端到视图顶部的距离scrollHeight纵向滚动条在Y轴上最⼤滚动距离
