微信小程序0.11.122100 版本更新详情介绍-小程序开发-PHP中文网

0.11.122100 更新概述

新增 4 个新 API， 2个新组件
拓展了 10 个组件属性，新增 6 个组件事件
修复数十个 API 以及组件 bug，优化部分交互体验
开发者工具增加新 API 及组件的调试支持
开发者工具增加微信支付的调试支持

详细更新日志如下：

基础库更新

A 新增 API wx.switchTab 详情
A 新增 API wx.scanCode
A 新增 API wx.createMapContext
A 新增 API wx.createCanvasContext
A 新增 API wx.showToast 调用参数 mask
A 新增页面方法 Page.onShareAppMessage 用于自定义分享内容
A 新增框架方法 App.onError
A 新增页面配置 disabelScroll
A 新增组件
A 新增组件，用于显示客服会话按钮
A 新增组件属性 openType
A 新增组件属性 color
A 新增
A 新增组件属性 markers polyline circles include-points controls show-location
A 新增组件属性 circular 控制衔接滑动
A 新增组件属性 cursor-spacing
A 新增组件属性 cursor-spacing</p></li> <li><p>A 新增 <picker/> 组件属性 disabled</p></li> <li><p>A 新增 <view/> 组件属性 hover-class</p></li> <li><p>A 新增 <scroll-view/> 组件属性 scroll-x, scroll-y 动态修改支持</p></li> <li><p>A 新增 <map/> 组件事件 bindtap bindmarkertap bindcontrolstap bindregionchange</p></li> <li><p>A 新增 <input/>组件事件 bindconfirm</p></li> <li><p>A 新增 <video/> 组件事件 bindtimeupdate</p></li> <li><p>A 新增 <textarea/> 组件事件 bindconfirm</p></li> <li><p>A 新增 <textarea/> 组件事件 bindinput</p></li> <li><p>A 新增 <canvas/> 组件事件 bindlongtap</p></li> <li><p>A 新增 AudioContext.setSrc() 上下文 API</p></li> <li><p>A 新增 CanvasContext 上下文</p></li> <li><p>A 新增 CanvasContext.arc() 上下文 API</p></li> <li><p>A 新增 CanvasContext.fillRect() 上下文 API</p></li> <li><p>A 新增 CanvasContext.strokeRect() 上下文 API</p></li> <li><p>A 新增 CanvasContext.createLinearGradient() 上下文 API</p></li> <li><p>A 新增 CanvasContext.createCircularGradient() 上下文 API</p></li> <li><p>A 新增 <scroll-view/> 组件表现滚动时禁止将页面滚动</p></li> <li><p>U 更新 API wx.getSystemInfo 新增 platform 返回参数</p></li> <li><p>U 更新 API wx.downloadFile 当 HTTP 状态码为 200 或 304 的时候会返回 tmpFilePath</p></li> <li><p>U 更新 API wx.showModal 调用参数 confirmText cancelText 的字数限制</p></li> <li><p>U 更新 WXML dataset 返回支持 Object 和 Array</p></li> <li><p>U 更新 <image/> 组件属性 mode 可选 widthFix</p></li> <li><p>U 更新 <picker/> 组件属性 range 增加 ObjectArray 类型支持</p></li> <li><p>U 更新 <switch/> <checkbox/> <radio/> 默认样式</p></li> <li><p>U 更新 CanvasContext.save() CanvasContext.restore() 上下文 API 保存画笔 style</p></li> <li><p>U 更新 CanvasContext.arc() 上下文 API 参数调整，新增 eAngle, counterclockwise，去除 sweepAngle</p></li> <li><p>U 优化 <swiper/> 滑动体验</p></li> <li><p>U 优化 <swiper/> <slider/> 在 <scroll-view/> 交互体验</p></li> <li><p>U 优化 <navigator/> <button/> 组件点击体验</p></li> <li><p>F 修复 wx.request 在 Android 上 method 只能用大写值的问题</p></li> <li><p>F 修复 wx.uploadFile 在 iOS 上无法设置 header 的问题</p></li> <li><p>F 修复 wx.getLocation type=gcj02 在 iOS 上不生效的问题</p></li> <li><p>F 修复 wx.showToast 退出小程序后依然显示的问题</p></li> <li><p>F 修复 wx.showModal 返回参数在 Android 和 iOS 不一致的问题</p></li> <li><p>F 修复 wx.showModal content 太长时或 title 为空时，布局错乱的问题</p></li> <li><p>F 修复 wx.showModal cancelText 和 confirmText 为空时，没有显示默认值的问题</p></li> <li><p>F 修复 wx.showModal 期间，键盘弹出，无法收起键盘的问题</p></li> <li><p>F 修复 wx.getImageInfo 在 Android 无法获取 http 链接图片的问题</p></li> <li><p>F 修复 wx.getSystemInfo 因为 tabbar 出现导致获取的屏幕高度不一致的问题</p></li> <li><p>F 修复 wx.downloadFile 在 Android 上下载后图片无法显示的问题</p></li> <li><p>F 修复 wx.request 没有对请求数据正确 encode 的问题</p></li> <li><p>F 修复 wx.login 在 iOS 中 App.onLaunch 没有回调的问题</p></li> <li><p>F 修复 wx.createAnimationContext 设置 transformOrigin 异常及动画不能进行下一步的问题</p></li> <li><p>F 修复 wx.navigateTo wx.redirectTo 在 iOS 上，Page.onLoad 无法调用的问题</p></li> <li><p>F 修复 catch 阻止事件的默认行为失效的问题</p></li> <li><p>F 修复 setInterval 在 iOS 传参错误导致页面卡死的问题</p></li> <li><p>F 修复 onReachBottom 触发多次的问题</p></li> <li><p>F 修复 <swiper/> 拥有文本节点后代时出错的问题</p></li> <li><p>F 修复 <switch/> <radio/> <checkbox/> <image/> <video/> hidden 属性不生效的问题</p></li> <li><p>F 修复 <checkbox/> <radio/> label 无法生效的问题</p></li> <li><p>F 修复 <scroll-view/> 滑动到顶部或底部闪屏的问题</p></li> <li><p>F 修复 <video/> 在 iOS 上事件不生效的问题</p></li> <li><p>F 修复 <video/> 在 iOS 被移除了声音会继续存在的问题</p></li> <li><p>F 修复 <text/> 内嵌不会动态更新 class 和 style 的问题</p></li> <li><p>F 修复 <button/> disabled 时文字颜色不对的问题</p></li> <li><p>F 修复 <input/> focus 属性无效的问题</p></li> <li><p>F 修复 <input/> 在 iOS9 使用 display:flex 的时候，第一次输入不显示的问题</p></li> <li><p>F 修复 <input/> 初始值为 undefined 时显示异常的问题</p></li> <li><p>F 修复 <input/> placeholder 重影的问题</p></li> <li><p>F 修复 <input/> <textare/> 聚焦前后颜色异常的问题</p></li> <li><p>F 修复 <textarea/> position:fixed 定位异常的问题</p></li> <li><p>F 修复 <textarea/> 在打开 picker 后不触发 blur 事件的问题</p></li> <li><p>F 修复 <textarea/> 设置 auto-height 时高度变化的问题</p></li> <li><p>F 修复 <textarea/> 销毁异常的问题</p></li> <li><p>F 修复 <video/> 在 Android 全屏按钮点击两次才能生效的问题</p></li> <li><p>F 修复 <audio/> 在多个页面中使用相同 id 冲突的问题</p></li> <li><p>F 修复 <canvas/> drawImage 无法正常显示的问题</p></li> <li><p>F 修复 <image/> 在 bindload 事件里面 setData 会出现死循环的问题</p></li> <li><p>F 修复 <scroll-view/> scroll-into-view 失效的问题</p></li> <li><p>F 修复 <form/> submit 取不到 input 的内容的问题</p></li> <li><p>D 即将移除 <navigator/> redirect 属性</p></li> <li><p>D 即将移除 wx.createContext 接口</p></li> <li><p>D 即将移除 <input/> auto-focus 属性，直接使用 focus 属性即可</p></li> <li><p>D 即将移除 <map /> covers 属性<br></p></li> </ul> <br><br>开发者工具基础功能<br><br><ul class="litype_1 list-paddingleft-2"> <li><p>A 新增 wx.switchTab 的调试支持</p></li> <li><p>A 新增 wx.startRecord wx.stopRecord wx.playVoice wx.pauseVoice wx.stopVoice API 调试支持</p></li> <li><p>A 新增微信支付调试支持</p></li> <li><p>A 新增二维码扫码调试支持</p></li> <li><p>A 新增 app.json 重复定义页面文件导致提交预览错误的提示</p></li> <li><p>A 新增模拟器加载图片网络错误的提示信息</p></li> <li><p>A 新增编译时候设置初始化页面以及参数的功能</p></li> <li><p>A 新增提交预览时候设置初始化页面以及参数的功能</p></li> <li><p>F 优化 appdata panel 分页面查看数据，支持动态更新以及 code 模式显示</p></li> <li><p>F 修复 wx.getBackgroundAudioPlayerState 在没有音乐播放的时候无返回的问题</p></li> <li><p>F 修复 wx.getBackgroundAudioPlayerState 获取 status 不正确的问题</p></li> <li><p>F 修复 wxml panel 某些情况下白屏的问题</p></li> <li><p>F 修复 wxml panel 属性无法复制，并且复制带有回车的问题</p></li> <li><p>F 修复 wxml panel 单一文本节点展示没有对齐的问题</p></li> <li><p>F 修复 app.json 中 tabbar 的 position 设置为 top 时模拟器显示错误的问题</p></li> <li><p>F 修复 devtools 和编辑器中点击外部链接错误的问题</p></li> <li><p>F 修复 wx.requst 因为缓存无法发送请求的问题<br></p></li> </ul>以下是更新详情：<br><br><br>wx.switchTab(OBJECT)<br><br>跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面<br>OBJECT 参数说明：<br>[tr]参数类型必填说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>url</td> <td>String</td> <td>是</td> <td>需要跳转的 tabBar 页面的路径（需在 app.json 的字段定义的页面），路径后不能带参数</td> </tr> <tr> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>示例代码：<br>{ "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] }}wx.switchTab({ url: '/index'})<br><br><br><br><br>wx.scanCode(OBJECT)<br><br>调起客户端扫码界面，扫码成功后返回对应的结果<br>Object 参数说明：<br>[tr]参数类型必填说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数，返回内容详见返回参数说明。</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>success返回参数说明：<br>[tr]参数说明[/tr]<table class="t_table"><tbody><tr class="firstRow"> <td>result</td> <td>码的内容</td> </tr></tbody></table>示例代码：<br>wx.scanCode({ success: (res) => { console.log(res) }})<br><br><br><br><br>onShareAppMessage<br><br>在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。<br><ul class=" list-paddingleft-2"> <li><p>只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮</p></li> <li><p>用户点击分享按钮的时候会调用</p></li> <li><p>此事件需要 return 一个 Object，用于自定以分享内容<br></p></li> </ul>自定义分享字段<br>[tr]字段说明默认值[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>分享标题</td> <td>当前小程序名称</td> </tr> <tr> <td>desc</td> <td>分享描述</td> <td>当前小程序名称</td> </tr> <tr> <td>path</td> <td>分享路径</td> <td>当前页面 path ，必须是以 / 开头的完整路径</td> </tr> </tbody></table>示例代码：<br>Page({ onShareAppMessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }})<br><br><br><br><br>wx.showToast(OBJECT)<br><br>显示消息提示框<br>OBJECT参数说明：<br>[tr]参数类型必填说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>String</td> <td>是</td> <td>提示的内容</td> </tr> <tr> <td>icon</td> <td>String</td> <td>否</td> <td>图标，只支持"success"、"loading"</td> </tr> <tr> <td>duration</td> <td>Number</td> <td>否</td> <td>提示的延迟时间，单位毫秒，默认：1500, 最大为10000</td> </tr> <tr> <td>mask</td> <td>Boolean</td> <td>否</td> <td>是否显示透明蒙层，防止触摸穿透，默认：false</td> </tr> <tr> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>示例代码：<br>wx.showToast({ title: '成功', icon: 'success', duration: 2000})<br><br><br>onShareAppMessage<br><br>在 Page 中定义 onShareAppMessage 函数，设置该页面的分享信息。<br><ul class=" list-paddingleft-2"> <li><p>只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮</p></li> <li><p>用户点击分享按钮的时候会调用</p></li> <li><p>此事件需要 return 一个 Object，用于自定以分享内容<br></p></li> </ul>自定义分享字段<br>[tr]字段说明默认值[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>分享标题</td> <td>当前小程序名称</td> </tr> <tr> <td>desc</td> <td>分享描述</td> <td>当前小程序名称</td> </tr> <tr> <td>path</td> <td>分享路径</td> <td>当前页面 path ，必须是以 / 开头的完整路径</td> </tr> </tbody></table>示例代码：<br>Page({ onShareAppMessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }})<br><br><br><br><br>wx.createCanvasContext(canvasId)<br><br>定义<br><br>创建 canvas 绘图上下文（指定 canvasId）<br>Tip: 需要指定 canvasId，该绘图上下文只作用于对应的 <canvas/><br><br><br><br>参数<br><br>[tr]参数类型说明[/tr]<table class="t_table"><tbody><tr class="firstRow"> <td>canvasId</td> <td>String</td> <td>画布表示，传入定义在 <canvas/> 的 canvas-id</td> </tr></tbody></table> <br><br><br>新增组件：<br><br><br>audioContext<br><br>audioContext 通过 audioId 跟一个 <audio/> 组件绑定，通过它可以操作对应的 <audio/> 组件。<br>audioContext 对象的方法列表：<br>[tr]方法参数说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>setSrc</td> <td>src</td> <td>音频的地址</td> </tr> <tr> <td>play</td> <td>无</td> <td>播放</td> </tr> <tr> <td>pause</td> <td>无</td> <td>暂停</td> </tr> <tr> <td>seek</td> <td>position</td> <td>跳转到指定位置，单位 s</td> </tr> </tbody></table>示例代码：<br><audio src="{{src}}" id="myAudio" ></audio><button type="primary" bindtap="audioPlay">播放</button><button type="primary" bindtap="audioPause">暂停</button><button type="primary" bindtap="audio14">设置当前播放时间为14秒</button><button type="primary" bindtap="audioStart">回到开头</button>// audio.jsPage({ onReady: function (e) { // 使用 wx.createAudioContext 获取 audio 上下文 context this.audioCtx = wx.createAudioContext('myAudio') this.audioCtx.setSrc('http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46') this.audioCtx.play() }, data: { src: '' }, audioPlay: function () { this.audioCtx.play() }, audioPause: function () { this.audioCtx.pause() }, audio14: function () { this.audioCtx.seek(14) }, audioStart: function () { this.audioCtx.seek(0) }})<br><br><img src="https://img.php.cn//upload/image/189/517/243/1488964166491492.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br><br>picker-view<br><br>嵌入页面的滚动选择器<br>[tr]属性名类型默认值说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>value</td> <td>Number Array</td> <td><br></td> <td>数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td> </tr> <tr> <td>indicator-style</td> <td>String</td> <td><br></td> <td>设置选择器中间选中框的样式</td> </tr> <tr> <td>bindchange</td> <td>EventHandle</td> <td><br></td> <td>当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td> </tr> </tbody></table>注意：其中只可放置<picker-view-column/>组件，其他节点不会显示。<br><br><br>picker-view-column<br><br>仅可放置于<picker-view />中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致<br>示例代码：<br><view> <view>{{year}}年{{month}}月{{day}}日</view> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> <picker-view-column> <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view> </picker-view-column> </picker-view></view>const date = new Date()const years = []const months = []const days = []for (let i = 1990; i <= date.getFullYear(); i++) { years.push(i)}for (let i = 1 ; i <= 12; i++) { months.push(i)}for (let i = 1 ; i <= 31; i++) { days.push(i)}Page({ data: { years: years, year: date.getFullYear(), months: months, month: 2, days: days, day: 2, year: date.getFullYear(), value: [9999, 1, 1], }, bindChange: function(e) { const val = e.detail.value this.setData({ year: this.data.years[val[0]], month: this.data.months[val[1]], day: this.data.days[val[1]] }) }})<br>Canvas增强<br><ul class="litype_1 list-paddingleft-2"> <li><p>A 新增 CanvasContext 上下文</p></li> <li><p>A 新增 CanvasContext.arc() 上下文 API</p></li> <li><p>A 新增 CanvasContext.fillRect() 上下文 API</p></li> <li><p>A 新增 CanvasContext.strokeRect() 上下文 API</p></li> <li><p>A 新增 CanvasContext.createLinearGradient() 上下文 API</p></li> <li><p>A 新增 CanvasContext.createCircularGradient() 上下文 API<br></p></li> </ul> <br><br>createCircularGradient<br><br>定义<br><br>创建一个圆形的渐变颜色。<br>Tip: 起点在圆心，终点在圆环。<br>Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。<br><br><br><br>参数<br><br>[tr]参数类型定义[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>x</td> <td>Number</td> <td>圆心的x坐标</td> </tr> <tr> <td>y</td> <td>Number</td> <td>圆心的y坐标</td> </tr> <tr> <td>r</td> <td>Number</td> <td>圆的半径</td> </tr> </tbody></table> <br><br><br>例子<br><br>const ctx = wx.createCanvasContext('myCanvas')// Create circular gradientconst grd = ctx.createCircularGradient(75, 50, 50)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Fill with gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br><br><img src="https://img.php.cn//upload/image/423/329/798/1488964146381136.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br><br><br>createLinearGradient<br><br>定义<br><br>创建一个线性的渐变颜色。<br>Tip: 需要使用 addColorStop() 来指定渐变点，至少要两个。<br><br><br><br>参数<br><br>[tr]参数类型定义[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>x0</td> <td>Number</td> <td>起点的x坐标</td> </tr> <tr> <td>y0</td> <td>Number</td> <td>起点的y坐标</td> </tr> <tr> <td>x1</td> <td>Number</td> <td>终点的x坐标</td> </tr> <tr> <td>y1</td> <td>Number</td> <td>终点的y坐标</td> </tr> </tbody></table> <br><br><br>例子<br><br>const ctx = wx.createCanvasContext('myCanvas')// Create linear gradientconst grd = ctx.createLinearGradient(0, 0, 200, 0)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Fill with gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br><img src="https://img.php.cn//upload/image/319/264/577/1488964126768032.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br>strokeRect<br><br>定义<br><br>画一个矩形(非填充)。<br>Tip: 用 setFillStroke() 设置矩形线条的颜色，如果没设置默认是黑色。<br><br><br><br>参数<br><br>[tr]参数类型范围说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>x</td> <td>Number</td> <td><br></td> <td>矩形路径左上角的x坐标</td> </tr> <tr> <td>y</td> <td>Number</td> <td><br></td> <td>矩形路径左上角的y坐标</td> </tr> <tr> <td>width</td> <td>Number</td> <td><br></td> <td>矩形路径的宽度</td> </tr> <tr> <td>height</td> <td>Number</td> <td><br></td> <td>矩形路径的高度</td> </tr> </tbody></table> <br><br><br>例子<br><br>const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw()<br><br><img src="https://img.php.cn//upload/image/939/521/900/1488964112354042.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br>fillRect<br><br>定义<br><br>填充一个矩形。<br>Tip: 用 setFillStyle() 设置矩形的填充色，如果没设置默认是黑色。<br><br><br><br>参数<br><br>[tr]参数类型说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>x</td> <td>Number</td> <td>矩形路径左上角的x坐标</td> </tr> <tr> <td>y</td> <td>Number</td> <td>矩形路径左上角的y坐标</td> </tr> <tr> <td>width</td> <td>Number</td> <td>矩形路径的宽度</td> </tr> <tr> <td>height</td> <td>Number</td> <td>矩形路径的高度</td> </tr> </tbody></table> <br><br><br>例子<br><br>const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br><br><img src="https://img.php.cn//upload/image/656/510/394/1488964097771237.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br><br><br>arc<br><br>定义<br><br>画一条弧线。<br>Tip: 创建一个圆可以用 arc() 方法指定其实弧度为0，终止弧度为 2 * Math.PI。<br>Tip: 用 stroke() 或者 fill() 方法来在 canvas 中画弧线。<br><br><br><br>参数<br><br>[tr]参数类型说明[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>x</td> <td>Number</td> <td>圆的x坐标</td> </tr> <tr> <td>y</td> <td>Number</td> <td>圆的y坐标</td> </tr> <tr> <td>r</td> <td>Number</td> <td>圆的半径</td> </tr> <tr> <td>sAngle</td> <td>Number</td> <td>起始弧度，单位弧度（在3点钟方向）</td> </tr> <tr> <td>eAngle</td> <td>Number</td> <td>终止弧度</td> </tr> <tr> <td>counterclockwise</td> <td>Boolean</td> <td>可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。</td> </tr> </tbody></table> <br><br><br>例子<br><br>const ctx = wx.createCanvasContext('myCanvas')// Draw coordinatesctx.arc(100, 75, 50, 0, 2 * Math.PI)ctx.setFillStyle('#EEEEEE')ctx.fill()ctx.beginPath()ctx.moveTo(40, 75)ctx.lineTo(160, 75)ctx.moveTo(100, 15)ctx.lineTo(100, 135)ctx.setStrokeStyle('#AAAAAA')ctx.stroke()ctx.setFontSize(12)ctx.setFillStyle('black')ctx.fillText('0', 165, 78)ctx.fillText('0.5*PI', 83, 145)ctx.fillText('1*PI', 15, 78)ctx.fillText('1.5*PI', 83, 10)// Draw pointsctx.beginPath()ctx.arc(100, 75, 2, 0, 2 * Math.PI)ctx.setFillStyle('lightgreen')ctx.fill()ctx.beginPath()ctx.arc(100, 25, 2, 0, 2 * Math.PI)ctx.setFillStyle('blue')ctx.fill()ctx.beginPath()ctx.arc(150, 75, 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()// Draw arcctx.beginPath()ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)ctx.setStrokeStyle('#333333')ctx.stroke()ctx.draw()<br>针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下：<img src="https://img.php.cn//upload/image/352/893/518/1488964083105591.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><ul class=" list-paddingleft-2"> <li><p>绿色: 圆心 (100, 75)</p></li> <li><p>红色: 起始弧度 (0)</p></li> <li><p>蓝色: 终止弧度 (1.5 * Math.PI)<br></p></li> </ul> <br><br><br><br><br>在Canvas上画图<br><br>所有在 <canvas/> 中的画图必须用 JavaScript 完成：<br>WXML：（我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板，不再重复）<br><canvas canvas-id="myCanvas" style="border: 1px solid;"/>JS：（我们在接下来的例子中会将 JS 放在 onLoad 中）<br>const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br><br><br>第一步：创建一个 Canvas 绘图上下文<br><br>首先，我们需要创建一个 Canvas 绘图上下文 CanvasContext。<br>CanvasContext 是小程序内建的一个对象，有一些绘图的方法：<br>const ctx = wx.createCanvasContext('myCanvas')<br><br><br>第二步：使用 Canvas 绘图上下文进行绘图描述<br><br>接着，我们来描述要在 Canvas 中绘制什么内容。<br>设置绘图上下文的填充色为红色：<br>ctx.setFillStyle('red')用 fillRect(x, y, width, height) 方法画一个矩形，填充为刚刚设置的红色：<br>ctx.fillRect(10, 10, 150, 75)<br><br><br>第三步：画图<br><br>告诉 <canvas/> 组件你要将刚刚的描述绘制上去：<br>ctx.draw()<br><br><br><p>以上是微信小程序0.11.122100 版本更新详情介绍的详细内容。更多信息请关注PHP中文网其他相关文章！</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>相关标签：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/zh/search?word=微信小程序" target="_blank">微信小程序</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">来源：php.cn</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/zh/faq/355585.html" title="分享微信小程序之文件结构目录解析"> <span>上一篇：分享微信小程序之文件结构目录解析</span> </a> <a href="https://www.php.cn/zh/faq/355652.html" title="微信小程序中如何引用wxml文件、视图模版的使用方法"> <span>下一篇：微信小程序中如何引用wxml文件、视图模版的使用方法</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">本站声明</div> <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">作者最新文章</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/354750.html">html设置加粗、倾斜、下划线、删除线等字体效果示例介绍</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/338018.html">实现一个 Java 版的 Redis</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/353509.html">最简单的微信小程序Demo</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/356272.html">python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/354839.html"> 微信小程序：如何实现tabs选项卡效果示例</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/354423.html">Python构造自定义方法来美化字典结构输出</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/350853.html">HTML5:使用Canvas实时处理Video</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/346502.html">Asp.net使用SignalR实现发送图片</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/354842.html">微信小程序开发教程-App()和Page()函数概述</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/zh/faq/356574.html">详解python redis使用方法</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">最新问题</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/zh/wenda/176374.html" target="_blank" title="在网络应用程序中显示版本信息的最佳实践是什么？" class="wdcdcTitle">在网络应用程序中显示版本信息的最佳实践是什么？</a> <a href="https://www.php.cn/zh/wenda/176374.html" class="wdcdcCons">我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-06 19:13:16</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>476</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/zh/wenda/176295.html" target="_blank" title="npx create-react-app 命令出现错误，我该如何解决？" class="wdcdcTitle">npx create-react-app 命令出现错误，我该如何解决？</a> <a href="https://www.php.cn/zh/wenda/176295.html" class="wdcdcCons">我一直在尝试使用'npxcreate-react-app'命令创建一个新的React应用，但似乎对我来说无效。最近有其他人遇到过这个问题吗？我有一个稳定的互联网连接，并确保我的系统...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-05 14:42:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>3511</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/zh/wenda/176271.html" target="_blank" title="如何使用 CSS 删除 Next.js 中井字游戏板上每行下方的空格？" class="wdcdcTitle">如何使用 CSS 删除 Next.js 中井字游戏板上每行下方的空格？</a> <a href="https://www.php.cn/zh/wenda/176271.html" class="wdcdcCons">为什么每一行下面都有一个空格？（CSS）我正在尝试制作一个Next.js井字游戏应用程序来测试我的技能。但是，我遇到了css问题。似乎每行板下方都存在填充问题-每行下方都有一个小空...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-05 11:39:02</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1431</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/zh/wenda/176199.html" target="_blank" title="如何通过 DOM 而不是通过表来呈现数据" class="wdcdcTitle">如何通过 DOM 而不是通过表来呈现数据</a> <a href="https://www.php.cn/zh/wenda/176199.html" class="wdcdcCons">我对我正在创建的应用程序有疑问，我正在使用Oracle数据库，并且我正在从数据库中获取信息并通过表格将其呈现在屏幕上，但我想尝试单独处理这些数据，例如创建一个段落并显示一个值。我只...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-04 18:17:27</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>3567</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/zh/wenda/176128.html" target="_blank" title="Google SHOPIFY用户登录后的授权流程" class="wdcdcTitle">Google SHOPIFY用户登录后的授权流程</a> <a href="https://www.php.cn/zh/wenda/176128.html" class="wdcdcCons">在登录Google后，我无法在任何地方找到关于用户授权账户的信息。我有一个基于laravel的应用程序，它登录到Google后，我们会收到用户的电子邮件、令牌等信息，那么我们如何将...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 来自于 2024-04-04 09:40:59</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>310</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>相关专题</div> <a href="https://www.php.cn/zh/faq/zt" target="_blank">更多> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/tokenzmhq"><img src="https://img.php.cn/upload/subject/202407/22/2024072213343018544.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="token怎么获取" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/tokenzmhq" class="title-a-spanl" title="token怎么获取"><span>token怎么获取</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/cyygethsdyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072214054482492.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="c语言get函数的用法" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/cyygethsdyf" class="title-a-spanl" title="c语言get函数的用法"><span>c语言get函数的用法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/smsjyw"><img src="https://img.php.cn/upload/subject/202407/22/2024072214382295806.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="什么是局域网" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/smsjyw" class="title-a-spanl" title="什么是局域网"><span>什么是局域网</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/excelsrzff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214175866488.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="excel输入值非法" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/excelsrzff" class="title-a-spanl" title="excel输入值非法"><span>excel输入值非法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/dnlswifiwInte"><img src="https://img.php.cn/upload/subject/202407/22/2024072213305941799.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="电脑连上wifi无internet访问怎么解决" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/dnlswifiwInte" class="title-a-spanl" title="电脑连上wifi无internet访问怎么解决"><span>电脑连上wifi无internet访问怎么解决</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/xpzmjljyw"><img src="https://img.php.cn/upload/subject/202407/22/2024072213520581478.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="xp怎么建立局域网" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/xpzmjljyw" class="title-a-spanl" title="xp怎么建立局域网"><span>xp怎么建立局域网</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/btcmwhxsm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212314637117.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="比特币铭文会消失吗" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/btcmwhxsm" class="title-a-spanl" title="比特币铭文会消失吗"><span>比特币铭文会消失吗</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/zh/faq/mysqlzmjlwtsy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213511733042.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="mysql怎么建立位图索引" /> </a> <a target="_blank" href="https://www.php.cn/zh/faq/mysqlzmjlwtsy" class="title-a-spanl" title="mysql怎么建立位图索引"><span>mysql怎么建立位图索引</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">热门推荐</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="微信小程序打不开什么原因" href="https://www.php.cn/zh/faq/467969.html">微信小程序打不开什么原因</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="订阅号和公众号的区别是什么" href="https://www.php.cn/zh/faq/465222.html">订阅号和公众号的区别是什么</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="微信小程序用什么语言来编写" href="https://www.php.cn/zh/faq/418037.html">微信小程序用什么语言来编写</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="小程序开发流程是什么？" href="https://www.php.cn/zh/faq/417201.html">小程序开发流程是什么？</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="小程序怎么生成二维码" href="https://www.php.cn/zh/faq/467888.html">小程序怎么生成二维码</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>热门教程</div> <a target="_blank" href="https://www.php.cn/zh/course.html">更多> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">相关教程 <div></div></div> <div class="tabdiv swiper-slide" data-id="two">热门推荐<div></div></div> <div class="tabdiv swiper-slide" data-id="three">最新课程<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/zh/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" href="https://www.php.cn/zh/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div>1420507 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/74.html" title="php入门教程之一周学会PHP" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="php入门教程之一周学会PHP"/> </a> <div class="wzrthree-right"> <a target="_blank" title="php入门教程之一周学会PHP" href="https://www.php.cn/zh/course/74.html">php入门教程之一周学会PHP</a> <div class="wzrthreerb"> <div>4263848 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/286.html" title="JAVA 初级入门视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初级入门视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初级入门视频教程" href="https://www.php.cn/zh/course/286.html">JAVA 初级入门视频教程</a> <div class="wzrthreerb"> <div>2508499 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/504.html" title="小甲鱼零基础入门学习Python视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲鱼零基础入门学习Python视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="小甲鱼零基础入门学习Python视频教程" href="https://www.php.cn/zh/course/504.html">小甲鱼零基础入门学习Python视频教程</a> <div class="wzrthreerb"> <div>505685 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/2.html" title="PHP 零基础入门教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 零基础入门教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 零基础入门教程" href="https://www.php.cn/zh/course/2.html">PHP 零基础入门教程</a> <div class="wzrthreerb"> <div>860765 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/zh/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" href="https://www.php.cn/zh/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div >1420507次学习</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/286.html" title="JAVA 初级入门视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初级入门视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 初级入门视频教程" href="https://www.php.cn/zh/course/286.html">JAVA 初级入门视频教程</a> <div class="wzrthreerb"> <div >2508499次学习</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/504.html" title="小甲鱼零基础入门学习Python视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲鱼零基础入门学习Python视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="小甲鱼零基础入门学习Python视频教程" href="https://www.php.cn/zh/course/504.html">小甲鱼零基础入门学习Python视频教程</a> <div class="wzrthreerb"> <div >505685次学习</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/901.html" title="Web前端开发极速入门" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web前端开发极速入门"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Web前端开发极速入门" href="https://www.php.cn/zh/course/901.html">Web前端开发极速入门</a> <div class="wzrthreerb"> <div >215568次学习</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/234.html" title="零基础精通 PS 视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="零基础精通 PS 视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" title="零基础精通 PS 视频教程" href="https://www.php.cn/zh/course/234.html">零基础精通 PS 视频教程</a> <div class="wzrthreerb"> <div >884918次学习</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/zh/course/1648.html" title="【web前端】Node.js快速入门" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="【web前端】Node.js快速入门"/> </a> <div class="wzrthree-right"> <a target="_blank" title="【web前端】Node.js快速入门" href="https://www.php.cn/zh/course/1648.html">【web前端】Node.js快速入门</a> <div class="wzrthreerb"> <div >7085次学习</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/1647.html" title="国外Web开发全栈课程全集" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="国外Web开发全栈课程全集"/> </a> <div class="wzrthree-right"> <a target="_blank" title="国外Web开发全栈课程全集" href="https://www.php.cn/zh/course/1647.html">国外Web开发全栈课程全集</a> <div class="wzrthreerb"> <div >5507次学习</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/1646.html" title="Go语言实战之 GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go语言实战之 GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go语言实战之 GraphQL" href="https://www.php.cn/zh/course/1646.html">Go语言实战之 GraphQL</a> <div class="wzrthreerb"> <div >4640次学习</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/1645.html" title="550W粉丝大佬手把手从零学JavaScript" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W粉丝大佬手把手从零学JavaScript"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W粉丝大佬手把手从零学JavaScript" href="https://www.php.cn/zh/course/1645.html">550W粉丝大佬手把手从零学JavaScript</a> <div class="wzrthreerb"> <div >666次学习</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/zh/course/1644.html" title="python大神Mosh，零基础小白6小时完全入门" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="python大神Mosh，零基础小白6小时完全入门"/> </a> <div class="wzrthree-right"> <a target="_blank" title="python大神Mosh，零基础小白6小时完全入门" href="https://www.php.cn/zh/course/1644.html">python大神Mosh，零基础小白6小时完全入门</a> <div class="wzrthreerb"> <div >23450次学习</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新下载</div> <a href="https://www.php.cn/zh/xiazai">更多> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">网站特效 <div></div></div> <div class="swiper-slide" data-id="twof">网站源码<div></div></div> <div class="swiper-slide" data-id="threef">网站素材<div></div></div> <div class="swiper-slide" data-id="fourf">前端模板<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery企业留言表单联系代码" href="https://www.php.cn/zh/toolset/js-special-effects/8071">[表单按钮] jQuery企业留言表单联系代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3音乐盒播放特效" href="https://www.php.cn/zh/toolset/js-special-effects/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5炫酷粒子动画导航菜单特效" href="https://www.php.cn/zh/toolset/js-special-effects/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery可视化表单拖拽编辑代码" href="https://www.php.cn/zh/toolset/js-special-effects/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS仿酷狗音乐播放器代码" href="https://www.php.cn/zh/toolset/js-special-effects/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="经典html5推箱子小游戏" href="https://www.php.cn/zh/toolset/js-special-effects/8066">[html5特效] 经典html5推箱子小游戏</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery滚动添加或减少图片特效" href="https://www.php.cn/zh/toolset/js-special-effects/8065">[图片特效] jQuery滚动添加或减少图片特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3个人相册封面悬停放大特效" href="https://www.php.cn/zh/toolset/js-special-effects/8064">[相册特效] CSS3个人相册封面悬停放大特效</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8328" title="家居装潢清洁维修服务公司网站模板" target="_blank">[前端模板] 家居装潢清洁维修服务公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8327" title="清新配色个人求职简历引导页模板" target="_blank">[前端模板] 清新配色个人求职简历引导页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8326" title="设计师创意求职简历网页模板" target="_blank">[前端模板] 设计师创意求职简历网页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8325" title="现代工程建筑公司网站模板" target="_blank">[前端模板] 现代工程建筑公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8324" title="教育服务机构响应式HTML5模板" target="_blank">[前端模板] 教育服务机构响应式HTML5模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8323" title="网上电子书店商城网站模板" target="_blank">[前端模板] 网上电子书店商城网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8322" title="IT技术解决互联网公司网站模板" target="_blank">[前端模板] IT技术解决互联网公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8321" title="紫色风格外汇交易服务网站模板" target="_blank">[前端模板] 紫色风格外汇交易服务网站模板</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3078" target="_blank" title="可爱的夏天元素矢量素材(EPS+PNG)">[PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3077" target="_blank" title="四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)">[PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3076" target="_blank" title="唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)">[banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3075" target="_blank" title="金色的毕业帽矢量素材(EPS+PNG)">[PNG素材] 金色的毕业帽矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3074" target="_blank" title="黑白风格的山脉图标矢量素材(EPS+PNG)">[PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3073" target="_blank" title="不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)">[PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3072" target="_blank" title="扁平风格的植树节banner矢量素材(AI+EPS)">[banner图] 扁平风格的植树节banner矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-materials/3071" target="_blank" title="九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)">[PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8328" target="_blank" title="家居装潢清洁维修服务公司网站模板">[前端模板] 家居装潢清洁维修服务公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8327" target="_blank" title="清新配色个人求职简历引导页模板">[前端模板] 清新配色个人求职简历引导页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8326" target="_blank" title="设计师创意求职简历网页模板">[前端模板] 设计师创意求职简历网页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8325" target="_blank" title="现代工程建筑公司网站模板">[前端模板] 现代工程建筑公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8324" target="_blank" title="教育服务机构响应式HTML5模板">[前端模板] 教育服务机构响应式HTML5模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8323" target="_blank" title="网上电子书店商城网站模板">[前端模板] 网上电子书店商城网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8322" target="_blank" title="IT技术解决互联网公司网站模板">[前端模板] IT技术解决互联网公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/zh/toolset/website-source-code/8321" target="_blank" title="紫色风格外汇交易服务网站模板">[前端模板] 紫色风格外汇交易服务网站模板</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益在线PHP培训，帮助PHP学习者快速成长！</p> </div> <div class="footermid"> <a href="https://www.php.cn/zh/about/us.html">关于我们</a> <a href="https://www.php.cn/zh/about/disclaimer.html">免责声明</a> <a href="https://www.php.cn/zh/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1732449173"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>