资料来源：《微信小程序》黑马程序员编著
一、微信小程序介绍：
- 微信小程序是一种不需要安装即可使用的应用，用户只要“扫一扫”或“搜一搜”即可打开应用，无须安装或卸载。微信小程序运行于微信之上，它的交互类似于手机原生应用，但是每个应用的体积非常小（目前上限是2048kb），具有无须安装、触手可及、用完即走、无须卸载的特点。
- 微信小程序借鉴了现有的Web技术，通过独立的运行环境实现了跨平台，并提供了接近原生APP的使用体验，具有明显的优势。为了降低微信小程序的开发成本，提高开发效率，微信小程序的开发方式与Web APP相似，即通过WXML(类似HTML)、WXSS(类似CSS)和JavaScript进行开发，(小程序也有一套脚本语言，为WXS(WeiXin Script)，语法与JavaScript类似又存在少量差异，具体可以查看小程序官方手册对WXS的说明)并且提供了丰富的组件、API（https://developers.weixin.qq.com/miniprogram/dev/framework/）和接口，从而具有更接近原生APP的使用体验。微信小程序相比Web APP也有一些不足，它不支持HTML标签和DOM操作，对CSS的支持也有限，一些成熟的前端库和框架(如jQuery、Vue.js)也无法使用，如果将Web APP修改成微信小程序需要进行大量的改动。微信小程序适合开发一些业务逻辑简单、低频次使用、对性能要求不高的应用。
- 开发环境的搭建：微信公众平台（https://mp.weiixn.qq.com）中选择小程序并注册一个小程序账号-->登录注册的账号-->开发工具中选择稳定版本的工具进行安装(涉及到的其他信息后续会介绍到)-->跳转的网页有工具的介绍
- 项目创建：打开已安装的微信开发者工具-->选择小程序-->完善项目的信息(选择不使用云服务)-->此时一个带有模板的项目已创建
- 项目目录介绍：app.js是应用程序的逻辑文件；app.json是应用程序的配置文件(进行页面路径、窗口表现、底部tab栏···)；app.wxss是应用程序的公共样式文件；project.config.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选择器
| 选择器 | 示例 | 说明 |
|---|
| .class | .container | 选择所有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 | 是否全局开启下拉刷新，默认为false |
| onReachBottomDistance | 页面上拉触底事件触发时距页面底部距离（单位为px），默认为50 |
| disableScroll | 默认为false。设为true时，页面整体不能上下滚动 |
若将enablePullDownRefresh设为true，页面可以下拉刷新，当下拉刷新操作执行时，就会触发下拉刷新事件onPullDownRefresh，在pages/index/index.js文件中可以找到该事件的处理函数。onReachBottomDistance主要用于开发自动加载更多的功能，也就是当页面中的内容非常长的时候，为了加快加载速度，并不是一次性加载所有的数据，而是先加载一部分数据将页面填满，知道出现滚动条，页面可以向上滚动。当用户向上拉时，如果快要到达底部了，就立即加载后面的数据。因此，onReachBottomDistance的值越大，加载的时机越提前。如果达到了给定的值，就会触发上拉触底事件onReachBottom，在pages/index/index.js文件中可以找到该事件的处理函数。
应用级配置文件(app.json)
| 属性 | 说明 |
|---|
| pages | 页面路径列表 |
| window | 全局的默认窗口表现 |
| tabBar | 底部tab栏的表现 |
| networkTimeout | 网络超时时间 |
| debug | 是否开启调试模式，默认为false |
| requireBackgroundModes | 需要在后台使用的能力，如音乐播放 |
| plugins | 使用到的插件 |
上述属性中，pages用来在app.json中设置页面；window的值是一个对象，可以将页面级的配置写在window中，作为应用级配置使用，从而一次设置多个页面，且优先级低于页面级配置；tabBar、plugins和requiredBackgroundModes后续会介绍；debug开启后可以在控制台中输出调试信息，帮助开发者快速定位到一些常见的问题。networkTimeout可以设置网络请求过程中的超时时间，详细如下表
networkTimeout属性
| 属性 | 类型 | 说明 |
|---|
| request | Number | wx.requert()的超时时间(ms)，默认为60000 |
| connectSocket | Number | wx.connectSocket()的超时时间(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 | 手指触摸后移动 |
| 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实例即可 |
三、基本知识介绍
- “{{}}”双大括号和setData()函数：在WXML中使用双大括号“{{}}”可以实现数据绑定和算术计算，这种语法又称为Mustache语法。双大括号中可以写一个变量名，如{{result}}，在页面打开后会到Page（{data:{result:""},···}）中读取result的值，显示在页面中。注意：不能通过直接赋值的方式来改变页面中{{result}}的值，如this.data.result=str。需要通过this.setData()方法来实现，该方法的参数是一个对象。
- 同一组件的相同事件：可以为多个相同组件绑定相同事件处理函数，只需为不同的组件设置不同id或dataset即可。具体为通过事件对象的属性集实现。
- 条件渲染和<block>：微信小程序中通过wx:if语法来定义条件渲染。此外，还支持wx:if和wx:else以及wx:if、wx:elif和wx:else的结构语法。有时控制一块区域是否出现则使用<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 | 是否显示面板指示点，默认为false |
| indicator-color | Color | 指示点颜色，默认为rgba(0,0,0,3) |
| indicator-active-color | Color | 当前选中的指示点颜色，默认为#000000 |
| autoplay | Boolean | 是否自动切换，默认为false |
| current | Number | 当前所在滑块的index，默认为0 |
| current-item-id | String | 当前所在滑块的item-id（不能同时指定current） |
| interval | Number | 自动切换时间间隔（ms），默认为5000 |
| duration | Number | 滑动动画市场（ms），默认为500 |
| circular | Boolean | 是否采用衔接滑动，默认为false |
| vertical | Boolean | 滑动方向是否为纵向，默认为false |
| bindchange | EventHandle | current改变时会触发change事件 |
- include代码引用：单标签，在wxml文件中可以使用<include>标签引用其他文件中的代码，相当于把引用的代码复制到<include>标签的位置。<include>标签可以方便的查找代码和减少重复的代码。语法：<include src="path" />。
- scroll-view组件：scroll-view组件用于实现可滚动视图区域。一般来说，当页面的高度超过了显示区域的高度时，先设置外层容器的高度，使之低于内部的高度，然后在外层容器的样式中设置overflow-y:scroll，就可以实现上下滚动了。但是这种方式只是从样式上实现了滚动，如果需要在滚动到顶部或底部时触发事件，就需要手动编写代码来实现了。
scroll-view组件常用属性
| 属性 | 类型 | 说明 |
|---|
| scroll-x | Boolean | 允许横向滚动，默认为false |
| scroll-y | Boolean | 允许纵向滚动，默认为false |
| scroll-top | Number/String | 设置竖向滚动条的位置 |
| scroll-left | Number/String | 设置横向滚动条的位置 |
| bindscrolltoupper | EventHandle | 添加到顶部/左边时触发的事件 |
| bindscrolltolower | EventHandle | 添加到底部/右边时触发的事件 |
| scroll-with-animation | Boolean | 在设置滚动条位置时是否使用动画过渡 |
| scroll-into-view | String | 设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头） |
| bindscroll | EventHandle | 滚动时触发的事件 |
滚动事件对象属性
| 属性 | 说明 |
|---|
| scrollLeft | 横向滚动条左侧到视图左边的距离 |
| scrollTop | 纵向滚动条上端到视图顶部的距离 |
| scrollHeight | 纵向滚动条在Y轴上最大滚动距离 |
| scrollWidth | 横向滚动条在X轴上最大滚动距离 |
| deltaX | 横向滚动条的滚动状态 |
| deltaY | 纵向滚动条的滚动状态 |
- image组件：微信小程序提供了image组件来定义图片，类似于HTML中的<img>标签，image组件除了用来显示图片，还支持对图片进行裁剪或缩放，提供了4种缩放模式和9种裁剪模式。image组建的默认宽高为300pxX225px，且image组件中的二维码不支持长按识别，如果需要实现长按识别可以使用wx.previewImage()这个API来实现。
image属性
| 属性 | 类型 | 说明 |
|---|
| src | String | 图片资源地址 |
| mode | String | 图片裁剪、缩放的模式，默认为scaleToFill |
| lazy-load | Boolean | 图片是否懒加载，默认为false。只针对page与scroll-view下的image有效 |
| binderror | HandleEvent | 图片发生错误时的事件 |
| bindload | HandleEvent | 图片载入完成时的事件 |
4种缩放模式
| 缩放模式 | 说明 |
|---|
| scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。适用于容器与图片宽高比相同的情况，如果不同，图片会变形 |
| aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。适用于将图片完整显示出来。例如，详情页的图片 |
| aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来，长边将会发生截取。适用于容器固定，图片自动缩放的情况，如列表页的缩略图 |
| widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
9种裁剪模式
| 裁剪模式 | 说明 |
|---|
| top | 不缩放图片，只显示图片的顶部区域 |
| bottom | 不缩放图片，只显示图片的底部区域 |
| center | 不缩放图片，只显示图片的中间区域 |
| left | 不缩放图片，只显示图片的左边区域 |
| right | 不缩放图片，只显示图片的右边区域 |
| top left | 不缩放图片，只显示图片的左上方区域 |
| top right | 不缩放图片，只显示图片的右上方区域 |
| bottom left | 不缩放图片，只显示图片的左下方区域 |
| bottom right | 不缩放图片，只显示图片的右下方区域 |
- 音频API：微信小程序提供了播放音频的API，在使用音频API时，需要创建一个InnerAudioContext实例。如：var audioCtx=wx.createInnerAudioContext()。audioCtx就是一个InnerAudioContext实例，也就是一个对象，利用这个对象的属性和方法可以完成具体的工作。
InnerAudioContext实例常用属性和方法
| 类型 | 名称 | 说明 |
|---|
| 属性 | src | 音频资源的地址，用于直接播放 |
| startTime | 开始播放的位置（s），默认为0 |
| autoplay | 是否自动开始播放，默认为false |
| loop | 是否循环播放，默认为false |
| volume | 音量。范围0~1。默认为1 |
| duration | 音频的长度（s），在当前有合法的src时返回（只读） |
| currentTime | 音频的播放位置（s）。在当前有合法的src时返回（只读） |
| paused | 当前是否暂定或停止状态（只读） |
| 方法 | play() | 播放 |
| pause() | 暂停（暂停后的音频再播放会从暂停处开始播放） |
| stop() | 停止（停止后的音频再播放会从头开始播放） |
| seek() | 跳转到指定位置 |
| destroy() | 销毁当前实例 |
| onCanplay() | 音频进入可以播放状态的事件（参数为回调函数） |
| onPlay() | 音频播放事件（参数为回调函数） |
| onPause() | 音频暂停事件（参数为回调函数） |
| onStop() | 音频停止事件（参数为回调函数） |
| onEnded() | 音频自然播放至结束的事件（参数为回调函数） |
| onSeeked() | 音频进行跳转操作的事件（参数为回调函数） |
| onTimeUpdate() | 音频播放进度更新事件（参数为回调函数） |
| onError() | 音频播放错误事件（参数为回调函数） |
- slider组件：单标签，slide组件是小程序组件中的一种，用于滑动选择某一个值。如可以实现播放器的进度条。
slide组件常用属性
| 属性 | 类型 | 说明 |
|---|
| min | Number | 最小值，默认为0 |
| max | Number | 最大值，默认为100 |
| step | Number | 步长，取值大于0，可按（max-min）整除，默认为1 |
| value | Number | 当前取值，默认为0 |
| activeColor | Color | 已选择的颜色，默认为#1aad19 |
| backgroundColor | Color | 背景条的颜色，默认为#e9e9e9 |
| block-size | Number | 滑块的大小，取值范围为12~28，默认为28 |
| block-color | Color | 滑块的颜色，默认为#ffffff |
| show-value | Boolean | 是否显示当前value，默认为false |
| bindchange | EventHandle | 完成一次拖动后触发的事件 |
| bindchanging | EventHandle | 拖动过程中触发的事件 |
tabBar底部标签栏属性
| 属性 | 说明 |
|---|
| color | 未选择时，底部导航文字的颜色 |
| selectorColor | 选中时，底部导航文字的颜色 |
| borderStyle | 底部导航边框的颜色（如果没有写入样式会出现浅灰色线条） |
| backgroundColor | 底部导航背景色 |
| list | 导航配置数组 |
list数组中标签按钮属性
| 属性 | 说明 |
|---|
| pagePath | 页面访问地址 |
| iconPath | 未选择时，图片路径 |
| selectedIconPath | 选中时，图片路径 |
| text | 导航图标下方文字 |
- wx.makePhoneCall()接口实现呼叫功能。如wx.makePhoneCall({phoneNumber:'号码'})。
- video组件：video组件常用于视频的播放，其默认宽度为300px，高度为225px，可通过WXSS设置宽度和高度。
video组件的常用属性
| 属性 | 类型 | 说明 |
|---|
| src | String | 视频的资源地址 |
| loop | Boolean | 是否循环播放，默认为false |
| controls | Boolean | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间），默认为true |
| danmu-list | Object | 弹幕列表 |
| danmu-btn | Boolean | 是否显示弹幕显示/隐藏按钮，旨在初始化时有效，不能动态变更，默认为false |
| enable-danmu | Boolean | 是否展示弹幕，旨在初始化时有效，不能动态变更，默认为false |
| autoplay | Boolean | 是否自动播放，默认为false |
| poster | String | 视频封面的图片网络资源地址，如果controls属性值为false则设置poster无效 |
| bindplay | EventHandle | 当开始/继续播放时触发play事件 |
| bindpause | EventHandle | 当暂停播放时触发pause事件 |
wx.createVideoContext()接口可以创建VideoContext对象，用于对video组件进行控制，其参数是video组件的id属性，如：wx.createVideoContext(‘#id’)。该对象的常用方法如下，更多属性和方法查看官方文档。
VideoContext对象常用方法
| 名称 | 说明 |
|---|
| play() | 播放视频 |
| pause() | 暂停视频 |
| stop() | 停止视频 |
| seek(number) | 跳转到指定的位置 |
| playbackRate(number) | 设置倍速播放 |
| requestFullScreen() | 进入全屏 |
| exitFullScreen() | 退出全屏 |
还可以使用wx.chooseVideo()接口来获取视频，具体细节请查看官方文档。
- 腾讯视频插件：关于插件的内容这里不做介绍。
- map组件：map组件常用来开发与地图相关的应用，如导航系统、打车软件、订单物流等。通过指定经纬度，即可显示该区域的地图，还可以添加标记点、路线、圆、控件等。由于map组件需要给定经纬度，可以通过腾讯位置服务网站提供的坐标拾取器（https://lbs.qq.com/getPoint）来获取。
map组件的常用属性
| 属性 | 类型 | 说明 |
|---|
| longitude | Number | 经度 |
| latitude | Number | 纬度 |
| scale | Number | 缩放级别，取值范围是5~18，默认为16 |
| markers | Array | 标记点 |
| polyline | Array | 路线 |
| circles | Array | 圆 |
| show-location | Boolean | 显示带有方向的当前定位点 |
| bindmarkertap | EventHandle | 单击标记点时触发，会返回marker的id |
| bindregionchange | EventHandle | 视野发生变化时触发 |
| bindtap | EventHandle | 单击地图时触发 |
| bindupdated | EventHandle | 在地图渲染更新完成时触发 |
上表中的markers、polyline、circles的值都是由对象组成的数组。下面的表格分别进行介绍。
markers标记点属性
| 属性 | 类型 | 必填 | 说明 |
|---|
| id | Number | 否 | 标记点id，marker单击事件回调会返回此id |
| longitude | Number | 是 | 经度，浮点数，范围-180~180 |
| latitude | Number | 是 | 纬度，浮点数，范围-90~90 |
| title | String | 否 | 标注点名 |
| zlndex | Number | 否 | 显示层级 |
| iconPath | String | 是 | 显示的图标，使用项目目录下的图片路径 |
| rotate | Number | 否 | 顺时针旋转的角度，范围0~360，默认为0 |
| alpha | Number | 否 | 透明度，范围0~1，默认为1（不透明） |
| width | Number | 否 | 图片宽度，默认为图片实际宽度 |
| height | Number | 否 | 图片高度，默认为图片实际高度 |
polyline坐标点属性
| 属性 | 类型 | 必填 | 说明 |
|---|
| points | Array | 是 | 经纬度数组，如[{latitude:0，longtitude:0}] |
| color | String | 否 | 线的颜色，8位十六进制表示，后两位表示alpha值，如#000000AA |
| width | Number | 否 | 线的宽度 |
| dottedLine | Boolean | 否 | 是否虚线，默认为false |
circles圆属性
| 属性 | 类型 | 必填 | 说明 |
|---|
| latitude | Number | 是 | 纬度，浮点数，范围-90~90 |
| longitude | Number | 是 | 经度，浮点数，范围-180~180 |
| color | String | 否 | 描边的颜色，8位十六进制表示，后两位表示alpha值，如#000000AA |
| fillColor | String | 否 | 填充颜色，8位十六进制表示，后两位表示alpha值，如#000000AA |
| radius | Number | 是 | 半径 |
| strokeWidth | Number | 否 | 描边的宽度 |
- 微信内置地图和定位：小程序提供了打开微信内置地图的API和定位用户位置的API，需要用户授权才能使用，也就是会自动提示用户“是否同意获取您的位置”，同意后即可获取。通过wx.getLovation()方法获取用户当前的位置，获取后再通过wx.openLocation()方法显示该位置的地图。如：
buttonTap:function(){
wx.getLocation({
type:'gcj02',
success:function(res){
wx.openLocation({
latitude:res.latitude,
longitude:res.longitude
})
}
})
}
上述代码中，第3行的type属性用于设置返回的坐标信息，默认值位wgs84，表示返回GPS坐标，设为gcj02表示返回用于wx.openLocation()方法的坐标。在将用户的位置获取成功后，就会执行第4行的回调函数，通过第5行代码打开微信内置地图。
picker组件：picker组件是从底部谈起的滚动选择器，目前支持5中选择器，通过mode属性来区分，分别是普通选择器（mode="selector"）、多列选择器（mode=“multiSelector”）、时间选择器（mode="time"）、日期选择器（mode=“date”）和省市区选择器（mode="region"），默认是普通选择器。虽然选择器数量比较多，但使用方法都很简单，具体可通过官方文档（https://developers.weixin.qq.com/miniprogram/dev/component/picker.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81）提供的属性来学习。
5770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
