微信小程序开发文档 第88页

逻辑层(App Service) 小程序开发框架的逻辑层是由JavaScript编写。 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。在 JavaScript 的基础上，我们做了一些修改，以方便地开发小程序。 增加 App 和 Page 方法，进行程序和页面的注册。 提供丰富的 API，如扫一扫，支付等微信特有能力。 每个页面有独立的作用域，并提供模块化能力。 由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。 开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

微信小程序开发目前可以说是非常火热的，很多小伙伴都在学习这方面的知识。本文将为大家带来众多微信小程序的实例源码，小伙伴们可以根据源码来进行进一步学习。 源码使用方法： 1、克隆项目代码到本地（git应该都要会哈，现在源码几乎都会放github上，会git才方便，不会的可以自学一下哦，不会的也没关系，gitHub上也提供直接下载的链接） 2、打开微信开发者工具； 3、添加项目->选择本项目目录->编译执行； 微信小程序源码： 微信小应用示例代码(phodal/weapp-quick) 源码链接：https://github.com/phodal/weapp-quick 微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo) 源码链接：https://github.com/giscafer/wechat-weapp-mapdemo 微信小应用- 掘金主页信息流(hilongjw/weapp-gold) 源码链接：https://github.com/hilongjw/weapp-gold 微信小程序（应用号）示例：微信小程序豆瓣电影(zce/weapp-demo) 源码链接：https://github.com/zce/weapp-demo 微信小程序-豆瓣电影(hingsir/weapp-douban-film) 源码链接：https://github.com/hingsir/weapp-douban-film 小程序 hello world 尝鲜(kunkun12/weapp) 源码链接：https://github.com/kunkun12/weapp 使用微信小程序开发2048游戏(sammffl/wechat-weapp-2048) 源码链接：https://github.com/sammffl/wechat-weapp-2048 微信小程序-微票(wangmingjob/weapp-weipiao) 源码链接：https://github.com/wangmingjob/weapp-weipiao 微信小程序购物车DEMO(SeptemberMaples/wechat-weapp-demo) 源码链接：https://github.com/SeptemberMaples/wechat-weapp-demo 微信小程序V2EX(jectychen/wechat-v2ex) 源码链接：https://github.com/jectychen/wechat-v2ex 微信小程序-知乎日报(myronliu347/wechat-app-zhihudaily) 源码链接：https://github.com/myronliu347/wechat-app-zhihudaily 微信小程序-公众号热门文章信息流(hijiangtao/weapp-newsapp) 源码链接：https://github.com/hijiangtao/weapp-newsapp 微信小程序版Gank客户端   源码链接：https://github.com/lypeer/wechat-weapp-gank 微信小程序集成Redux实现的Todo list   源码链接：https://github.com/charleyw/wechat-weapp-redux-todos 微信小程序-番茄时钟   源码链接：https://github.com/kraaas/timer 微信小程序版聊天室   源码链接： https://github.com/ericzyh/wechat-chat 微信小程序-HiApp   源码链接： https://github.com/BelinChung/wxapp-hiapp 小程序Redux绑定库   源码链接： https://github.com/charleyw/wechat-weapp-redux 微信小程序版微信 源码链接：  https://github.com/18380435477/WeApp 小程序开发从布局开始 源码链接：  https://github.com/hardog/wechat-app-flexlayout 微信小程序-音乐播放器  源码链接： https://github.com/eyasliu/wechat-app-music 微信小程序-简易计算器-适合入门 源码链接： https://github.com/dunizb/wxapp-sCalc 微信小程序-github  源码链接：  https://github.com/zhengxiaowai/weapp-github 微信小程序-小熊の日记  源码链接：  https://github.com/harveyqing/BearDiary 微信小程序 源码链接： https://github.com/SeaHub/PigRaising 微信小程序(WeChatMeiZhi妹子图) 源码链接：https://github.com/brucevanfdm/WeChatMeiZhi 以上就是W3Cschool为大家整理的微信小程序实例代码，希望能对各位小伙伴们学习微信小程序开发能够有所帮助。

不能直接操作 Page.data 避免在直接对 Page.data 进行赋值修改，请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染 怎么获取用户输入 能够获取用户输入的组件，需要使用组件的属性bindchange将用户的输入内容同步到AppService <input id="myInput" bindblur="bindBlur" /> var inputContent = {} Page({ data:{ inputContent: {} }, bindChange:function(e){ inputContent[e.currentTarget.id] = e.detail.value } }) 为什么脚本内不能使用window对象 页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件 为什么zepto/jquery无法使用 zepto/jquery会使用到window对象和document对象，所以无法使用。 wx.navigateTo无法打开页面 一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo 样式表不支持级联选择器 WXSS支持以.开始的类选择器。如： .normal_view{ color: #000000; padding: 10px; } 可以使用标签选择器，控制同一类组件的样式。如：使用input标签选择器控制<input/>的默认样式。 input{ width: 100px; } 本地资源无法通过WXSS获取 background-image：可以使用网络图片，或者base64，或者使用<image/>标签 如何修改窗口的背景色 使用page标签选择器，可以修改顶层节点的样式 page{ display:block; min-height:100%; background-color:red; } HTTPS 请求不成功 tls 仅支持 1.2 及以上版本 部分 Android 机型需要 tls1.0 或者 tls1.1，所以请确保服务器的 tls 版本为 1.0、1.1、1.2 网络请求的 referer 网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中{appid}为小程序的 appid，{version}为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本。 为什么 map 组件总是在最上层 map、canvas、video、textarea是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置z-index为多少，都无法盖在原生组件上。 原生组件暂时还无法放在scroll-view上，也无法对原生组件设置css动画。

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

小程序&卡券打通 小程序&卡券打通 1 打通主要支持特性 支持在小程序中领取/查看/使用公众号AppId创建的会员卡、票、券（含通用卡）。 注：创建卡券部分可见卡券接口文档。 2 商家需要做什么 2.1. 需在open平台绑定公众号AppId与小程序AppId，详情查看https://open.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1439297282&version=10&lang=zh_CN&token=； 2.2. 原卡券中配置的自定义外链基础上新增一组小程序页面配置字段，支持将卡券内链接升级为小程序； 2.3. 以小程序AppId调用添加/查看卡券JS-API，签名参数与公众号Addcard/Opencard JS-SDK一致； 2.4. 核销卡券、数据查看保持现网路径，商家无需调整。   3 商家接入落地的接口内容 3.1. 创建接口/更新卡券信息接口base_info中新增进入小程序页面字段，商家需将小程序字段配置进原自定义外链结构体中，小程序页面新增字段示例如下： { "card": { "card_type": "MEMBER_CARD", "member_card": { "base_info": { "custom_url_name": "立即使用", "custom_url": "http://www.qq.com", "custom_app_brand_user_name": "gh_86a091e50ad4@app", "custom_app_brand_pass":"API/cardPage", "custom_url_sub_title": "6个汉字tips", "promotion_url_name": "更多优惠", "promotion_url": "http://www.qq.com", "promotion_app_brand_user_name": "gh_86a091e50ad4@app", "promotion_app_brand_pass":"API/cardPage" } } } 字段名 字段描述 字段示例 custom_app_brand_user_name 自定义使用入口跳转小程序的user_name，格式为原始id+@app gh_86a091e50ad4@app custom_app_brand_pass 自定义使用入口小程序页面地址 API/cardPage center_app_brand_user_name 小程序的user_name gh_86a091e50ad4@app center_app_brand_pass 自定义居中使用入口小程序页面地址 API/cardPage promotion_app_brand_user_name 小程序的user_name gh_86a091e50ad4@app promotion_app_brand_pass 自定义营销入口小程序页面地址 API/cardPage activate_app_brand_user_name 小程序的user_name, gh_86a091e50ad4@app activate_app_brand_pass 激活小程序页面地址 API/cardPage — — — *需调用卡券更新接口将相应小程序页面更新至对应跳转外链结构体中，原跳转H5字段保留。   3.2. 领取/查看卡券的接口参数不变，以小程序的AppId调用JSSDK，填入公众号AppId下的参数。查看接口文档。 // 微信低版本下尚未支持小程序卡券 wx.addCard, wx.openCard， // 这两个接口调用前请先判断，示例： if ( typeof wx.addCard === 'function' ) { wx.addCard({ cardList: [{ cardId: '', cardExt: '' }], // 需要添加的卡券列表，cardExt内的签名使用公众号appid获取 success: function (res) { var cardList = res.cardList; // 添加的卡券列表信息 } })}; 腾讯公司

基础组件 框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。 什么是组件： 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样式。 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。 <tagname property="value"> Content goes here ... </tagename> 注意：所有组件与属性都是小写，以连字符-连接 属性类型 类型 描述 注解 Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型 Number 数字 1, 2.5 String 字符串 "string" Array 数组 [ 1, "string" ] Object 对象 { key: value } EventHandler 事件处理函数名 "handlerName"是Page中定义的事件处理函数名 Any 任意属性   共同属性类型 所有组件都有的属性： 属性名 类型 描述 注解 id String 组件的唯一标示 保持整个页面唯一 class String 组件的样式类 在对应的wxss中定义的样式类 style String 组件的内联样式 可以动态设置的内联样式 hidden Boolean 组件是否显示 所有组件默认显示 data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数 bind* / catch* EventHandler 组件的事件 详见事件 特殊属性 几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。 组件列表 基础组件分为以下八大类： 视图容器(View Container)： 组件名 说明 view 视图容器 scroll-view 可滚动视图容器 swiper 可滑动的视图容器 基础内容(Basic Content)： 组件名 说明 icon 图标 text 文字 progress 进度条 表单(Form)： 标签名 说明 button 按钮 form 表单 input 输入框 checkbox 多项选择器 radio 单项选择器 picker 列表选择器 picker-view 内嵌列表选择器 slider...

canvasContext.lineDashOffset 基础库 1.9.90 开始支持，低版本需做兼容处理 定义 设置虚线偏移量的属性 语法 canvasContext.lineDashOffset = value 参数 属性值 类型 说明 value Number 偏移量，初始值为 0

canvasContext.strokeText 基础库 1.9.90 开始支持，低版本需做兼容处理 定义 给定的 (x, y) 位置绘制文本描边的方法 语法 canvasContext.strokeText(text, x, y, maxWidth) 参数 属性值 类型 说明 text String 要绘制的文本 x Number 文本起始点的 x 轴坐标 y Number 文本起始点的 y 轴坐标 maxWidth Number 需要绘制的最大宽度，可选

canvasContext.arcTo 基础库 1.9.90 开始支持，低版本需做兼容处理 定义 根据控制点和半径绘制圆弧路径。 语法 canvasContext.arcTo(x1, y1, x2, y2, radius) 参数 属性值 类型 说明 x1 Number 第一个控制点的 x 轴坐标 y1 Number 第一个控制点的 y 轴坐标 x2 Number 第二个控制点的 x 轴坐标 y2 Number 第二个控制点的 y 轴坐标 radius Number 圆弧的半径

wx.getUpdateManager() 基础库 1.9.90 开始支持，低版本需做兼容处理 获取全局唯一的版本更新管理器，用于管理小程序更新。 关于小程序的更新机制，可以查看 运行机制 文档。 updateManager updateManager 对象的方法列表： 方法 参数 说明 onCheckForUpdate callback 当向微信后台请求完新版本信息，会进行回调 onUpdateReady callback 当新版本下载完成，会进行回调 onUpdateFailed callback 当新版本下载失败，会进行回调 applyUpdate 当新版本下载完成，调用该方法会强制当前小程序应用上新版本并重启 onCheckForUpdate(callback) 回调结果说明： 属性 类型 说明 hasUpdate Boolean 是否有新的版本 注： 检查更新操作由微信在小程序冷启动时自动触发，不需由开发者主动触发，开发者只需监听检查结果即可。 onUpdateReady(callback) 回调结果说明： 当微信检查到小程序有新版本，会主动触发下载操作（无需开发者触发），当下载完成后，会通过 onUpdateReady 告知开发者。 onUpdateFailed(callback) 回调结果说明： 当微信检查到小程序有新版本，会主动触发下载操作（无需开发者触发），如果下载失败（可能是网络原因等），会通过 onUpdateFailed 告知开发者。 applyUpdate() 说明： 当小程序新版本已经下载时（即收到 onUpdateReady 回调），可以通过这个方法强制重启小程序并应用上最新版本。 示例代码： const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate) }) updateManager.onUpdateReady(function () { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 })