小程序起步

简易教程

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志。下载源码1. 获取微信小程序的 AppID登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。2. 创建项目我们需要通过开发者工具,来完成小程序创建和代码编辑。开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者...


小程序框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。响应的数据绑定框架的核心是一个响应的数据绑定系统。整个系统分为两块视图层(View)和逻辑层(App Ser...

小程序组件

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。什么是组件:组件是视图层的基本组成单元。组件自带一些功能与微信风格的样式。一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。<tagname property="value"> Content goes here ...</tagename>注...

小程序API

框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。说明:wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。OBJECT中可以指定success, fail, complete来接收接口调用...

小程序Q&A

不能直接操作 Page.data避免在直接对 Page.data 进行赋值修改,请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染怎么获取用户输入能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService。<input id="myInput" bindchange="bindChange&q...

小程序框架

文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:文件必填作用app.js是小程序逻辑app.json是小程序公共设置app.wxss否小程序公共样式表一个小程序页面由四个文件组成,分别是:

配置

我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。以下是一个包含了所有配置选项的简单配置app.json :{ "pages": [ "pages/index/index", "pages/logs/index" ], "window...

逻辑层(App Service)

小程序开发框架的逻辑层是由JavaScript编写。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。增加 App 和 Page 方法,进行程序和页面的注册。增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。提供丰富的 API,如微信用户数据,扫一扫,支付等...

注册程序(App)

App()App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。object参数说明:属性类型描述触发时机onLaunchFunction生命周期函数--监听小程序初始化当小程序初始化完成时,会触发 onLaunch(全局只触发一次)onShowFunction生命周期函数--监听小程序显示当小程序启动,或从后台进入前台显示,会触发 onShowonHid...

注册页面(Page)

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。object 参数说明:属性类型描述dataObject页面的初始数据onLoadFunction生命周期函数--监听页面加载onReadyFunction生命周期函数--监听页面初次渲染完成onShowFunction生命周期函数--监听页面显示onHideFunction生命周...

文件作用域和模块化

文件作用域在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置,如:// app.jsApp({ globalData: 1})// a.js// The localValue can only be used in fil...

视图层

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。WXML(WeiXin Markup language)用于描述页面的结构。WXSS(WeiXin Style Sheet)用于描述页面的样式。组件(Component)是视图的基本组成单元。

WXML

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。用以下一些简单的例子来看看 WXML 具有什么能力:数据绑定<!--wxml--><view> {{message}} </view>// page.jsPage({ data: { message: 'Hello MI...

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:内容<view> {{ message }} </view>Page({ data: { message: 'Hello MINA!' } })组件属性(需要在双引号之内)<view id="it...

条件渲染

wx:if在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:<view wx:if="{{condition}}"> True </view>也可以用 wx:elif 和 wx:else 来添加一个 else 块:<view wx:if="{{length > 5}}&qu...

列表渲染

wx:for在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>Page({ data: { arra...

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。定义模板使用name属性,作为模板的名字。然后在<template/>内定义代码片段,如:<!-- index: int msg: string time: string --><template name="msgItem"> &...

事件

什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches。事件的使用方式在组件中绑定一个事件处理函数。如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。<view id="...

引用

WXML 提供两种文件引用方式import和include。importimport可以在该文件中使用目标文件定义的template,如:在 item.wxml 中定义了一个叫item的template:<!-- item.wxml --><template name="item"> <text>{{text}}</text>...

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。与 CSS 相比我们扩展的特性有:尺寸单位样式导入尺寸单位rpx(responsive pixel): 可以根据...

基础组件

视图容器 view

视图容器。属性名类型默认值说明hoverBooleanfalse是否启用点击态hover-classStringnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果hover-start-timeNumber50按住后多久出现点击态,单位毫秒hover-stay-timeNumber400手指松开后点击态保留时间,单位毫秒示例:<vie...

视图容器 scroll-view

可滚动视图区域。属性名类型默认值说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时(单位px),触发 scrolltoupper 事件lower-thresholdNumber50距底部/右边多远时(单位px),触发 scrolltolower 事件scroll-topNumb...

视图容器 swiper

滑块视图容器。属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点indicator-colorColorrgba(0, 0, 0, .3)指示点颜色 (这个属性目前暂未启用)indicator-active-colorColor#000000当前选中的指示点颜色 (这个属性目前暂未启用)autoplayBooleanfalse是否自动切换currentNum...

icon

图标。属性名类型默认值说明typeStringicon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizeNumber23icon的大小,单位pxcolorColoricon的颜色,同css的color示例:<view class="group&quo...

text

文本。支持转义符"\"。<text/> 组件内只支持 <text/> 嵌套。除了文本节点以外的其他节点都无法长按选中。示例:<view class="btn-area"> <view class="body-view"> <text>{{text}}</te...

progress

进度条。属性名类型默认值说明percentFloat无百分比0~100show-infoBooleanfalse在进度条右侧显示百分比stroke-widthNumber6进度条线的宽度,单位pxcolorColor#09BB07进度条颜色activeBooleanfalse进度条从左往右的动画示例:<progress percent="20" show-info /&g...

表单组件 button

按钮。属性名类型默认值说明sizeStringdefault有效值 default, minitypeStringdefault按钮的样式类型,有效值 primary, default, warnplainBooleanfalse按钮是否镂空,背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名称前是否带 loading 图标form-typeStri...

表单组件 checkbox

checkbox-group多项选择器,内部由多个checkbox组成。属性名类型默认值说明bindchangeEventHandle<checkbox-group/>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}checkbox多选项目。属性名类型默认值说明valueString<checkbox/&g...

表单组件 form

表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单...

表单组件 input

输入框。属性名类型默认值说明valueString输入框的初始内容typeStringtextinput 的类型,有效值:text, number, idcard, digitpasswordBooleanfalse是否是密码类型placeholderString输入框为空时占位符placeholder-styleString指定 placeholder 的样式placeholder-classS...

表单组件 label

用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>。属性名类型说明forString绑定控件的 id示例代码:<...

表单组件 picker

从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。普通选择器:mode = selector属性名类型默认值说明rangeArray / Object Array[]mode为 selector 时,range 有效range-keyString当 range 是一个 Object Array 时,通过 range-key 来...

表单组件 picker-view

嵌入页面的滚动选择器属性名类型默认值说明valueNumber Array数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。indicator-styleString设置选择器中间选中框的样式bindchangeEventHandle当滚动选择,va...

表单组件 radio

radio-group单项选择器,内部由多个<radio/>组成。属性名类型默认值说明bindchangeEventHandle<radio-group/> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}radio单选项目属性名类型默认值说明valueString<radio/> 标识。...

表单组件 slider

滑动选择器。属性名类型默认值说明minNumber0最小值maxNumber100最大值stepNumber1步长,取值必须大于 0,并且可被(max - min)整除disabledBooleanfalse是否禁用valueNumber0当前取值colorColor#e9e9e9背景条的颜色selected-colorColor#1aad19已选择的颜色show-valueBooleanfals...

表单组件 switch

开关选择器。属性名类型默认值说明checkedBooleanfalse是否选中typeStringswitch样式,有效值:switch, checkboxbindchangeEventHandlechecked 改变时触发 change 事件,event.detail={ value:checked}colorColorswitch 的颜色,同 css 的 color<view class...

表单组件 textarea

多行输入框。属性名类型默认值说明valueString输入框的内容placeholderString输入框为空时占位符placeholder-styleString指定 placeholder 的样式placeholder-classStringtextarea-placeholder指定 placeholder 的样式类disabledBooleanfalse是否禁用maxlengthNumbe...

导航 navigator

页面链接。属性名类型默认值说明urlString应用内的跳转链接redirectBooleanfalse打开方式为页面重定向,对应 wx.redirectTo(将被废弃,推荐使用 open-type)open-typeStringnavigate可选值 'navigate'、'redirect'、'switchTab',对应于wx.navigateTo、wx.redirectTo、wx.switc...

媒体组件 audio

音频。属性名类型默认值说明idStringvideo 组件的唯一标识符srcString要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleantrue是否显示默认控件posterString默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效nameString未知音频默认控件上的音频名字,如果 con...

媒体组件 image

图片。属性名类型默认值说明srcString图片资源地址modeString'scaleToFill'图片裁剪、缩放的模式binderrorHandleEvent当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}bindloadHandleEvent当图片载入完毕时,发布到 AppService 的事件...

媒体组件 video

视频。属性名类型默认值说明srcString要播放视频的资源地址controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)danmu-listObject Array弹幕列表danmu-btnBooleanfalse是否显示弹幕按钮,只在初始化时有效,不能动态变更enable-danmuBooleanfalse是否展示弹幕,只在初始化时有效,不能动态变更autop...

地图 map

地图。属性名类型默认值说明longitudeNumber中心经度latitudeNumber中心纬度scaleNumber16缩放级别,取值范围为5-18markersArray标记点coversArray即将移除,请使用 markerspolylineArray路线circlesArray圆controlsArray控件include-pointsArray缩放视野以包含所有给定的坐标点show...

画布 canvas

画布。属性名类型默认值说明canvas-idStringcanvas 组件的唯一标识符disable-scrollBooleanfalse当在 canvas 中移动时,禁止屏幕滚动以及下拉刷新bindtouchstartEventHandle手指触摸动作开始bindtouchmoveEventHandle手指触摸后移动bindtouchendEventHandle手指触摸动作结束bindtouch...

客服会话 contact-button

客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。属性名类型默认值说明sizeNumber18会话按钮大小,有效值 18-27,单位:pxtypeStringdefault-dark会话按钮的样式类型,有效值 default-dark, default-lightsession-fromString用户从该按钮进入会话时,开发者将收到带上本参数的事件推送。本参数可用于...

API

发起请求 wx.request

wx.request(OBJECT)wx.request发起的是 HTTPS 请求。OBJECT参数说明:参数名类型必填说明urlString是开发者服务器接口地址dataObject、String否请求的参数headerObject否设置请求的 header , header 中不能设置 ReferermethodString否默认为 GET,有效值:OPTIONS, GET, HEAD, PO...

上传 wx.uploadFile

wx.uploadFile(OBJECT)将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data 。OBJECT参数说明:参数类型必填说明urlString是开发者服务器 urlfi...

下载 wx.downloadFile

wx.downloadFile(OBJECT)下载文件资源到本地。客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。OBJECT参数说明:参数类型必填必填urlString是下载资源的 urlheaderObject否HTTP 请求 HeadersuccessFunction否下载成功后以 tempFilePath 的形式传给页面,res = {tempFilePath: '文件...

WebSocket

wx.connectSocket(OBJECT)创建一个 WebSocket 连接;一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。OBJECT参数说明:参数类型必填说明urlString是开发者服务器接口地址,必须是 wss 协议,且域名必须是后台配置的合法域名dataObject否...

图片

wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照。OBJECT参数说明:参数类型必填说明countNumber否最多可以选择的图片张数,默认9sizeTypeStringArray否original 原图,compressed 压缩图,默认二者都有sourceTypeStringArray否album 从相册选图,camera 使用相机,默认二者都有successFun...

录音

wx.startRecord(OBJECT)开始录音。当主动调用wx.stopRecord,或者录音超过1分钟时自动结束录音,返回录音文件的临时文件路径。当用户离开小程序时,此接口无法调用。OBJECT参数说明:参数类型必填说明successFunction否录音成功后调用,返回录音文件的临时文件路径,res = {tempFilePath: '录音文件的临时路径'}failFunction否接口...

音频播放控制

wx.playVoice(OBJECT)开始播放语音,同时只允许一个语音文件正在播放,如果前一个语音文件还没播放完,将中断前一个语音播放。OBJECT参数说明:参数类型必填说明filePathString是需要播放的语音文件的文件路径successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成...

音乐播放控制

wx.getBackgroundAudioPlayerState(OBJECT)获取后台音乐播放状态。OBJECT参数说明:参数类型必填说明successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)success返回参数说明:参数说明duration选定音频的长度(单位:s...

音频组件控制

wx.createAudioContext(audioId)创建并返回 audio 上下文 audioContext 对象audioContextaudioContext 通过 audioId 跟一个 <audio/> 组件绑定,通过它可以操作对应的 <audio/> 组件。audioContext 对象的方法列表:方法参数说明setSrcsrc音频的地址play无播放pa...

视频

wx.chooseVideo(OBJECT)拍摄视频或从手机相册中选视频,返回视频的临时文件路径。OBJECT参数说明:参数类型必填说明sourceTypeStringArray否album 从相册选视频,camera 使用相机拍摄,默认为:['album', 'camera']maxDurationNumber否拍摄视频最长拍摄时间,单位秒。最长支持 60 秒cameraString否默认调起的...

视频组件控制

wx.createVideoContext(videoId)创建并返回 video 上下文 videoContext 对象videoContextvideoContext 通过 videoId 跟一个 video 组件绑定,通过它可以操作一个 video 组件。videoContext对象的方法列表:方法参数说明play无播放pause无暂停seekposition跳转到指定位置,单位 ssend...

文件

wx.saveFile(OBJECT)保存文件到本地。OBJECT参数说明:参数类型必填说明tempFilePathString是需要保存的文件的临时路径successFunction否返回文件的保存路径,res = {savedFilePath: '文件的保存路径'}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)...

数据缓存

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 l...

位置

wx.getLocation(OBJECT)获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用。OBJECT参数说明:参数类型必填说明typeString否默认为 wgs84 返回 gps 坐标,gcj02 返回可用于wx.openLocation的坐标successFunction是接口调用成功的回调函数,返回内容详见返回参数说明。fa...

地图组件控制

wx.createMapContext(mapId)创建并返回 map 上下文 mapContext 对象mapContextmapContext 通过 mapId 跟一个 <map/> 组件绑定,通过它可以操作对应的 <map/> 组件。mapContext 对象的方法列表方法参数说明getCenterLocationOBJECT获取当前地图中心的经纬度,返回的是 gcj...

系统信息

wx.getSystemInfo(OBJECT)获取系统信息。OBJECT参数说明:参数类型必填说明successFunction是接口调用成功的回调failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)success回调参数说明:属性说明model手机型号pixelRatio设备像素比windowWidth窗口宽度win...

网络状态

wx.getNetworkType(OBJECT)获取网络类型。OBJECT参数说明:参数类型必填说明successFunction是接口调用成功,返回网络类型 networkTypefailFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)wx.getNetworkType({ success: function(re...

重力感应

wx.onAccelerometerChange(CALLBACK)监听重力感应数据,频率:5次/秒CALLBACK返回参数:参数类型说明xNumberX 轴yNumberY 轴zNumberZ 轴示例代码:wx.onAccelerometerChange(function(res) { console.log(res.x) console.log(res.y) console....

罗盘

wx.onCompassChange(CALLBACK)监听罗盘数据,频率:5次/秒CALLBACK返回参数:参数类型说明directionNumber面对的方向度数示例代码:wx.onCompassChange(function (res) { console.log(res.direction) })

拨打电话

wx.makePhoneCall(OBJECT)OBJECT参数说明:参数类型必填说明phoneNumberString是需要拨打的电话号码successFunction否接口调用成功的回调failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)示例代码:wx.makePhoneCall({ phoneNumber: ...

扫码

wx.scanCode(OBJECT)调起客户端扫码界面,扫码成功后返回对应的结果Object 参数说明:参数类型必填说明successFunction否接口调用成功的回调函数,返回内容详见返回参数说明。failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)success返回参数说明:参数说明result所扫码的内容sca...

交互反馈

wx.showToast(OBJECT)显示消息提示框OBJECT参数说明:参数类型必填说明titleString是提示的内容iconString否图标,只支持"success"、"loading"durationNumber否提示的延迟时间,单位毫秒,默认:1500, 最大为10000maskBoolean否是否显示透明蒙层,防止触摸穿透,默认:false...

设置导航条

wx.setNavigationBarTitle(OBJECT)动态设置当前页面的标题。OBJECT参数说明:参数类型必填说明titleString是页面标题successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)示例代码:wx.setNavigationBarTitle...

导航

wx.navigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。OBJECT 参数说明:参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=valu...

动画

wx.createAnimation(OBJECT)创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。注意: export 方法每次调用后会清掉之前的动画操作 OBJECT参数说明:参数类型必填说明durationInteger否动画持续时间,单位ms,默认值 400timingFunctionStrin...

在Canvas上画图

所有在 <canvas/> 中的画图必须用 JavaScript 完成:WXML:(我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板,不再重复)<canvas canvas-id="myCanvas" style="border: 1px solid;"/>JS:(我们在接下来的例子中会将 JS 放在 onLoad 中)c...

Canvas 坐标系

canvas 是在一个二维的网格当中。左上角的坐标为(0, 0)。在之前的章节,我们用了这个方法 fillRect(0, 0, 150, 75)。它的含义为:从左上角(0, 0)开始,画一个150 x 75px 的矩形。坐标系例子:我们可以在 <canvas/> 中加上一些事件,来观测它的坐标系<canvas canvas-id="myCanvas" s...

渐变

渐变能用于填充一个矩形,圆,线,文字等。填充色可以不固定位固定的一种颜色。我们提供了两种颜色渐变的方式:createLinearGradient(x, y, x1, y1) - 创建一个线性的渐变createCircularGradient(x, y, r) - 创建一个从圆心开始的渐变一旦我们创建了一个渐变对象,我们必须添加两个颜色渐变点。addColorStop(position, color...

wx.createCanvasContext

wx.createCanvasContext(canvasId)定义创建 canvas 绘图上下文(指定 canvasId)Tip: 需要指定 canvasId,该绘图上下文只作用于对应的 <canvas/>参数画布表示,传入定义在 <canvas/> 的 canvas-id参数类型说明canvasIdString

wx.createContext

wx.createContext (不推荐使用)创建并返回绘图上下文。

drawCanvas

drawCanvas (不推荐使用)定义用所提供的 actions 在所给的 canvas-id 对应的 canvas 上进行绘图。参数(可选)本次绘制是否接着上一次绘制,即reserve参数为false,则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制;若reserver参数为true,则保留当前画布上的内容,本次调用drawCanvas绘制的内容覆盖在上面,默认 ...

canvasToTempFilePath

canvasToTempFilePath(OBJECT)定义把当前画布的内容导出生成图片,并返回文件路径OBJECT参数说明参数类型必填说明canvasIdString是画布标识,传入 <canvas/> 的 cavas-idsuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调...

setFillStyle

setFillStyle定义设置填充色。Tip: 如果没有设置 fillStyle,默认颜色为 black。参数参数类型定义colorColor \Gradient Object填充色例子const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ct...

setStrokeStyle

定义设置边框颜色。Tip: 如果没有设置 fillStyle,默认颜色为 black。参数参数类型定义colorColor \Gradient Object填充色例子const ctx = wx.createCanvasContext('myCanvas') ctx.setStrokeStyle('red') ctx.strokeRect(10, 10, 150, 75) ctx.draw(...

setShadow

定义设置阴影样式。Tip: 如果没有设置,offsetX 默认值为0, offsetY 默认值为0, blur 默认值为0,color 默认值为 black。参数参数类型范围定义offsetXNumber阴影相对于形状在水平方向的偏移offsetYNumber阴影相对于形状在竖直方向的偏移blurNumber0~100阴影的模糊级别,数值越大越模糊colorColor阴影的颜色例子const ct...

createLinearGradient

定义创建一个线性的渐变颜色。Tip: 需要使用 addColorStop() 来指定渐变点,至少要两个。参数参数类型定义x0Number起点的x坐标y0Number起点的y坐标x1Number终点的x坐标y1Number终点的y坐标例子const ctx = wx.createCanvasContext('myCanvas') // Create linear gradientconst grd...

createCircularGradient

定义创建一个圆形的渐变颜色。Tip: 起点在圆心,终点在圆环。Tip: 需要使用 addColorStop() 来指定渐变点,至少要两个。参数参数类型定义xNumber圆心的x坐标yNumber圆心的y坐标rNumber圆的半径例子const ctx = wx.createCanvasContext('myCanvas') // Create circular gradient const...

addColorStop

定义创建一个颜色的渐变点。Tip: 小于最小 stop 的部分会按最小 stop 的 color 来渲染,大于最大 stop 的部分会按最大 stop 的 color 来渲染。Tip: 需要使用 addColorStop() 来指定渐变点,至少要两个。参数参数类型定义stopNumber(0-1)表示渐变点在起点和终点中的位置colorColor渐变点的颜色例子const ctx = wx.cre...

setLineWidth

定义设置线条的宽度。参数参数类型说明lineWidthNumber线条的宽度(单位是px)例子const ctx = wx.createCanvasContext('myCanvas') ctx.beginPath() ctx.moveTo(10, 10) ctx.lineTo(150, 10) ctx.stroke() ctx.beginPath() ctx.setLineWid...

setLineCap

定义设置线条的端点样式。参数参数类型范围说明lineCapString'butt'、'round'、'square'线条的结束端点样式例子const ctx = wx.createCanvasContext('myCanvas') ctx.beginPath() ctx.moveTo(10, 10) ctx.lineTo(150, 10) ctx.stroke() ctx.begin...

setLineJoin

定义设置线条的交点样式。参数参数类型范围说明lineJoinString'bevel'、'round'、'miter'线条的结束交点样式例子const ctx = wx.createCanvasContext('myCanvas') ctx.beginPath() ctx.moveTo(10, 10) ctx.lineTo(100, 50) ctx.lineTo(10, 90) ctx....

setMiterLimit

定义设置最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离。 当 setLineJoin() 为 miter 时才有效。超过最大倾斜长度的,连接处将以 lineJoin 为 bevel 来显示参数参数类型说明miterLimitNumber最大斜接长度例子const ctx = wx.createCanvasContext('myCanvas') ctx.beginPath() c...

rect

定义创建一个矩形。Tip: 用 fill() 或者 stroke() 方法将矩形真正的画到 canvas 中。参数参数类型说明xNumber矩形路径左上角的x坐标yNumber矩形路径左上角的y坐标widthNumber矩形路径的宽度heightNumber矩形路径的高度例子const ctx = wx.createCanvasContext('myCanvas') ctx.rect(10, 1...

fillRect

定义填充一个矩形。Tip: 用 setFillStyle() 设置矩形的填充色,如果没设置默认是黑色。参数参数类型说明xNumber矩形路径左上角的x坐标yNumber矩形路径左上角的y坐标widthNumber矩形路径的宽度heightNumber矩形路径的高度例子const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('...

strokeRect

定义画一个矩形(非填充)。Tip: 用 setFillStroke() 设置矩形线条的颜色,如果没设置默认是黑色。参数参数类型范围说明xNumber矩形路径左上角的x坐标yNumber矩形路径左上角的y坐标widthNumber矩形路径的宽度heightNumber矩形路径的高度例子const ctx = wx.createCanvasContext('myCanvas') ctx.setStr...

clearRect

定义清除画布上在该矩形区域内的内容。Tip: clearRect 并非画一个白色的矩形在地址区域,而是清空,为了有直观感受,对 canvas 加了一层背景色。<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>参数参数类型说明xNumber矩形...

fill

定义对当前路径中的内容进行填充。默认的填充色为黑色。Tip: 如果当前路径没有闭合,fill() 方法会将起点和终点进行连接,然后填充,详情见例一。Tip: fill() 填充的的路径是从 beginPath() 开始计算,但是不会将 fillRect() 包含进去,详情见例二。例子const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo...

stroke

定义画出当前路径的边框。默认颜色色为黑色。Tip: stroke() 描绘的的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去,详情见例二。例子const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 10...

beginPath

定义开始创建一个路径,需要调用fill或者stroke才会使用路径进行填充或描边。Tip: 在最开始的时候相当于调用了一次 beginPath()。Tip: 同一个路径内的多次setFillStyle()、setStrokeStyle()、setLineWidth()等设置,以最后一次设置为准。例子const ctx = wx.createCanvasContext('myCanvas') //...

closePath

定义关闭一个路径Tip: 关闭路径会连接起点和终点。Tip: 如果关闭路径后没有调用 fill() 或者 stroke() 并开启了新的路径,那之前的路径将不会被渲染。例子const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx...

moveTo

定义把路径移动到画布中的指定点,不创建线条。Tip: 用 stroke() 方法来画线条参数参数类型说明xNumber目标位置的x坐标yNumber目标位置的y坐标例子const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.moveTo(10, 50) ctx.l...

lineTo

定义lineTo 方法增加一个新点,然后创建一条从上次指定点到目标点的线。Tip: 用 stroke() 方法来画线条参数参数类型说明xNumber目标位置的x坐标yNumber目标位置的y坐标例子const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.rect(10, 10, 100, 50) ctx.li...

arc

定义画一条弧线。Tip: 创建一个圆可以用 arc() 方法指定其实弧度为0,终止弧度为 2 * Math.PI。Tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。参数参数类型说明xNumber圆的x坐标yNumber圆的y坐标rNumber圆的半径sAngleNumber起始弧度,单位弧度(在3点钟方向)eAngleNumber终止弧度counterclock...

bezierCurveTo

定义创建三次方贝塞尔曲线路径。Tip: 曲线的起始点为路径中前一个点。参数参数类型说明cp1xNumber第一个贝塞尔控制点的 x 坐标cp1yNumber第一个贝塞尔控制点的 y 坐标cp2xNumber第二个贝塞尔控制点的 x 坐标cp2yNumber第二个贝塞尔控制点的 y 坐标xNumber结束点的 x 坐标yNumber结束点的 y 坐标例子const ctx = wx.createCa...

quadraticCurveTo

定义创建二次贝塞尔曲线路径。Tip: 曲线的起始点为路径中前一个点。参数参数类型说明cpxNumber贝塞尔控制点的x坐标cpyNumber贝塞尔控制点的y坐标xNumber结束点的x坐标yNumber结束点的y坐标例子const ctx = wx.createCanvasContext('myCanvas') // Draw points ctx.beginPath() ctx.arc...

scale

定义在调用scale方法后,之后创建的路径其横纵坐标会被缩放。多次调用scale,倍数会相乘。参数参数类型说明scaleWidthNumber横坐标缩放的倍数 (1 = 100%,0.5 = 50%,2 = 200%)scaleHeightNumber纵坐标轴缩放的倍数 (1 = 100%,0.5 = 50%,2 = 200%)例子const ctx = wx.createCanvasContex...

rotate

定义以原点为中心,原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate,旋转的角度会叠加。参数参数类型说明rotateNumber旋转角度,以弧度计(degrees * Math.PI/180;degrees范围为0~360)const ctx = wx.createCanvasContext('myCanvas') ctx.strokeRect(100, 10...

translate

定义对当前坐标系的原点(0, 0)进行变换,默认的坐标系原点为页面左上角。参数参数类型说明xNumber水平坐标平移量yNumber竖直坐标平移量例子const ctx = wx.createCanvasContext('myCanvas') ctx.strokeRect(10, 10, 150, 100) ctx.translate(20, 20) ctx.strokeRect(10,...

setFontSize

定义设置字体的字号。参数参数类型说明fontSizeNumber字体的字号例子const ctx = wx.createCanvasContext('myCanvas') ctx.setFontSize(20) ctx.fillText('20', 20, 20) ctx.setFontSize(30) ctx.fillText('30', 40, 40) ctx.setFontSi...

fillText

定义在画布上绘制被填充的文本。参数参数类型说明textString在画布上输出的文本xNumber绘制文本的左上角x坐标位置yNumber绘制文本的左上角y坐标位置例子const ctx = wx.createCanvasContext('myCanvas') ctx.setFontSize(20) ctx.fillText('Hello', 20, 20) ctx.fillText('...

drawImage

定义绘制图像,图像保持原始尺寸。参数参数类型说明imageResourceString所要绘制的图片资源xNumber图像左上角的x坐标yNumber图像左上角的y坐标widthNumber图像宽度heightNumber图像高度例子const ctx = wx.createCanvasContext('myCanvas') wx.chooseImage({ success: func...

setGlobalAlpha

定义设置全局画笔透明度。参数参数类型范围说明alphaNumber0~1透明度,0 表示完全透明,1 表示完全不透明例子const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 100) ctx.setGlobalAlpha(0.2) ctx.setF...

save / restore

save定义保存当前的绘图上下文。restore定义恢复之前保存的绘图上下文。例子const ctx = wx.createCanvasContext('myCanvas') // save the default fill style ctx.save() ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 100) // re...

draw

定义将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。Tip: 绘图上下文需要由 wx.createCanvasContext(canvasId) 来创建。参数参数类型说明reserveBoolean非必填。本次绘制是否接着上一次绘制,即reserve参数为false,则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制;若reserver参数为true...

getActions

getActions (不推荐使用)返回绘图上下文的绘图动作。

clearActions

clearActions (不推荐使用)清空绘图上下文的绘图动作。

下拉刷新

onPullDownRefresh在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件。需要在 config 的window选项中开启 enablePullDownRefresh。当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。wx.stopPullDownRefresh()停止当前页面下拉刷新。示例代码:Pag...

登录

wx.login(OBJECT)调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。用户数据的加解密通讯需要依赖会话密钥完成。OBJECT参数说明:参数名类型必填说明successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用...

签名加密

用户数据的签名验证和加解密数据签名校验为了确保 开放接口 返回用户数据的安全性,微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验,确保数据的完整性。签名校验算法涉及用户的session_key,通过 wx.login 登录流程获取用户session_key,并自行维护与应用自身登录态的对应关系。通过调用接口(如 wx.getUserInfo)获取数据时,接口会同时返回 rawD...

用户信息

wx.getUserInfo(OBJECT)获取用户信息,需要先调用 wx.login 接口。OBJECT参数说明:参数名类型必填说明successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)success返回参数说明:参数类型说明userInfoOBJECT用户信息对象,...

微信支付

wx.requestPayment(OBJECT)发起微信支付。Object参数说明:参数类型必填说明timeStampString是时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间nonceStrString是随机字符串,长度为32个字符以下。packageString是统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*signTypeStrin...

模板消息

基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。模板推送位置:服务通知模板下发条件:用户本人在微信体系内与页面有交互行为后触发,详见下发条件说明模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面使用说明获取模板 id登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使...

接收消息和事件

接收消息和事件在页面中使用 <contact-button/> 可以显示进入客服会话按钮。当用户在客服会话发送消息(或进行某些特定的用户操作引发的事件推送时),微信服务器会将消息(或事件)的数据包(JSON或者XML格式)POST请求开发者填写的URL。开发者收到请求后可以使用发送客服消息接口进行异步回复。微信服务器在将用户的消息发给小程序的开发者服务器地址(开发设置处配置)后,微信服...

发送客服消息

发送客服消息当用户和小程序客服产生特定动作的交互时(具体动作列表请见下方说明),微信将会把消息数据推送给开发者,开发者可以在一段时间内(目前修改为48小时)调用客服接口,通过POST一个JSON数据包来发送消息给普通用户。此接口主要用于客服等有人工消息处理环节的功能,方便开发者为用户提供更加优质的服务。目前允许的动作列表如下,不同动作触发后,允许的客服接口下发消息条数和下发时限不同。下发条数达到上...

临时素材接口

获取临时素材小程序可以使用本接口获取客服消息内的临时素材(即下载临时的多媒体文件)。目前小程序仅支持下载图片文件。接口调用请求说明HTTP 请求方式: GET,HTTPS 调用https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

接入指引

接入概述接入微信小程序消息服务,开发者需要按照如下步骤完成:1、填写服务器配置2、验证服务器地址的有效性3、依据接口文档实现业务逻辑下面详细介绍这3个步骤。第一步:填写服务器配置登录微信小程序官网后,在小程序官网的“设置-消息服务器”页面,管理员扫码启用消息服务,填写服务器地址(URL)、Token 和 EncodingAESKey。URL是开发者用来接收微信消息和事件的接口URL。 Token可...

分享

onShareAppMessage在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息。只有定义了此事件处理函数,右上角菜单才会显示“分享”按钮用户点击分享按钮的时候会调用此事件需要 return 一个 Object,用于自定义分享内容自定义分享字段字段说明默认值title分享标题当前小程序名称path分享路径当前页面 path ,必须是以 / 开头的完整路径示例代...

获取二维码

获取小程序页面二维码通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面接口地址:https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN获取 access_token 详见文档 POST 参数说明 参数默认值说明path不能为空,最大长度 128 字节wid...

Copyright © 2016 - 2019 织小程序
   我要留言