ONE PIECE--小程序
M.Siebel
Talk is cheap, Show me the code
展开
-
小程序开发之全局逻辑层App.js及生命周期
小程序逻辑层 App Service小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层...原创 2019-01-03 17:35:53 · 2048 阅读 · 0 评论 -
小程序开发之页面逻辑层.js及生命周期
Page(Object) 构造器Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。例如Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options...原创 2019-01-03 17:46:04 · 811 阅读 · 0 评论 -
小程序开发之组件事件处理函数、route及setData介绍
组件事件处理函数Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定,当事件被触发时,就会执行 Page 中定义的事件处理函数。.wxml<view bindtap="viewTap">click me</view>.jsPage({ viewTap() { console.log('view tap') }})Page.r...原创 2019-01-03 17:49:39 · 1126 阅读 · 0 评论 -
小程序开发之场景值及使用方法
场景值场景值ID说明1001发现栏小程序主入口,“最近使用”列表1005顶部搜索框的搜索结果页1006发现栏小程序主入口搜索框的搜索结果页1007单人聊天会话中的小程序消息卡片1008群聊会话中的小程序消息卡片1011扫描二维码1012长按图片识别二维码1013手机相册选取二维码1014小程序模版消息10...原创 2019-01-03 17:52:08 · 2494 阅读 · 1 评论 -
小程序开发之组件movable-view(移动的视图容器)
movable-view可移动的视图容器,在页面中可以拖拽滑动movable-view属性注意:movable-view必须在组件中,并且必须是直接子节点,否则不能移动。movable-areamovable-view 的可移动区域注意:movable-area 必须设置width和height属性,不设置默认为10px当movable-view小于movable-area时,m...原创 2019-01-11 10:55:08 · 4188 阅读 · 0 评论 -
小程序开发之组件cover-view、 cover-image(覆盖在原生组件的组件)
cover-view覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image,可在cover-view中使用button。cover-image覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持嵌套在cover-view里。...原创 2019-01-11 11:02:02 · 3869 阅读 · 0 评论 -
小程序开发之组件基本内容icon、text
icon图标。例如:效果展示代码:index.wxml<view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block></view&原创 2019-01-11 14:32:46 · 248 阅读 · 0 评论 -
小程序开发之组件rich-text(富文本)
rich-text富文本富文本格式(Rich Text Format, 一般简称为RTF):多文本格式,由未格式化文本、控制字、控制符号和组组成。为了更容易的转换,一个标准的RTF文件应该仅包含7位ASCII码字符,RTF文件没有限制文件的行的最大长度。普通的txt文件是不能显示格式的。富文本格式rtf文件可以显示出很多格式信息。富文本的作用:比如可以在一个文本中包含不同的颜色、不同的字...原创 2019-01-11 14:39:16 · 17050 阅读 · 0 评论 -
小程序开发之组件progress(进度条)
progress进度条。例如:效果展示:代码index.wxml<!-- percent:10.0 百分比0~100 show-info:false 在进度条右侧显示百分比 border-radius:0 圆角大小,单位px(2.4.0起支持rpx) font-size:16 右侧百分比字体大小,单位px(2.4.0起支持rpx) ...原创 2019-01-11 14:44:58 · 4380 阅读 · 0 评论 -
小程序开发之组件open-data(展示微信开放的数据)
open-data用于展示微信开放的数据。type 有效值:Tips:只有当前用户在此群内才能拉取到群名称关于open-gid的获取请使用 wx.getShareInfo例如:效果展示代码index.wxml<!-- type 开放数据类型 open-gid 当 type="groupName" 时生效, 群id lang 当 type="...原创 2019-01-17 10:32:42 · 6307 阅读 · 0 评论 -
小程序开发之组件web-view(浏览器)
web-viewweb-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。注:navigationStyle: custom 对 组件无效非正式域名链接需要登录小程序管理后台配置业务域名。网页内 iframe 的域名也需要配置到域名白名单。开发者工具上,可以在 组件上通过右键 - 调试,打开 组件的调试。每个页面只...原创 2019-01-17 10:35:48 · 1798 阅读 · 1 评论 -
小程序开发之组件ad(广告)
ad广告。目前暂时以邀请制开放申请,请留意后续模板消息的通知注1:监听到error回调后,开发者可以针对性的处理,比如隐藏广告组件的父容器,以保证用户体验,但不要移除广告组件,否则将无法收到bindload的回调。错误码信息与解决方案表错误码是通过binderror回调获取到的错误信息。注意目前可以给 ad 标签设置 wxss 样式调整广告宽度,以使广告与页面更融洽,但请遵循小程...原创 2019-01-17 10:36:55 · 3044 阅读 · 0 评论 -
小程序开发之原生组件
小程序中的部分组件是由客户端创建的原生组件,这些组件有:原生组件cameracanvasinput(仅在focus时表现为原生组件)live-playerlive-pushermaptextareavideo原生组件的使用限制由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为...原创 2019-01-17 10:55:44 · 1142 阅读 · 0 评论 -
小程序开发之组件textarea(多行输入框)-- 补
textarea多行输入框。该组件是原生组件,使用时请注意相关限制。Tip:请注意原生组件使用限制。微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit。...原创 2019-01-17 10:58:48 · 2514 阅读 · 2 评论 -
小程序开发之无障碍访问
为了更好地满足视障人士对于小程序的访问需求,基础库自2.5.0起,支持部分ARIA标签。无障碍特性在读屏模式下可以访问,iOS可通过设置->通用->辅助功能->旁白打开。以组件为例,增加了aria-role和aria-label属性。 其中aria-role表示组件的角色,当设置为’img’时,读屏模式下聚焦后系统会朗读出’图像’。设置为’button’时,聚焦后后系统朗...原创 2019-01-17 11:03:16 · 1382 阅读 · 0 评论 -
小程序开发之API
API小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。详细介绍请参考 API 文档。通常,在小程序 API 有以下几种类型:事件监听 API同步 API异步 API事件监听 API我们约定,以 on 开头的 API 用来监听某个事件是否触发,如:wx.onSocketOpen,wx.onCompassChange等。这...原创 2019-01-17 11:16:20 · 874 阅读 · 0 评论 -
小程序开发之组件button(按钮)
button按钮。button属性注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}:bindgetphonenumber 从1.2.0 开始支持,但是在1.5.3以下版本中无法使用wx.canIUse进行检测,建议使用基础库版本进行判断。:在bindgetphonenumber 等返回加...原创 2019-01-11 17:05:16 · 1190 阅读 · 0 评论 -
小程序开发之组件checkbox-group(多项选择器)
checkbox-group多项选择器,内部由多个checkbox组成。checkbox多选项目。例如:效果展示代码index.wxml<checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <!-- ...原创 2019-01-11 17:07:54 · 6088 阅读 · 0 评论 -
小程序开发API之wx.canIUse(判断API是否可用的API)
wx.canIUseboolean wx.canIUse(string schema)判断小程序的API,回调,参数,组件等是否在当前版本可用。返回值:boolean 当前版本是否可用参数:string schema 使用 ${API}.${method}.${param}.${options}或者 ${component}.${attribute}.${option} 方式来调用...原创 2019-01-17 15:09:19 · 14404 阅读 · 0 评论 -
小程序开发之路由navigateTo、reLaunch、redirectTo、switchTab及传值问题
页面路由在小程序中所有页面的路由全部由框架进行管理。注:路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。页面栈框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:注:堆是先进先出,栈是先进后出getCurrentPages()getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素...原创 2019-01-07 15:18:18 · 4411 阅读 · 0 评论 -
小程序开发之文件作用域(全局变量)与模块化(utils抽离工具类)
文件作用域在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置,例如:globalData: { //全局变量 userInfo: 1 }如果在App.js里调用onShow(options)...原创 2019-01-07 15:29:49 · 978 阅读 · 0 评论 -
小程序开发之常用的工具类总结
写之前先说一下抽取公共类注意问题require 暂时不支持绝对路径一般情况下创建在utils文件中先说明如何抽取工具类假设:(1)先创建公共工具类common.js注:一般情况下创建在utils文件// common.jsfunction sayHello(name) { console.log(`Hello ${name} `)}function sayGoodbye...原创 2019-01-07 15:37:52 · 656 阅读 · 0 评论 -
小程序开发之注意问题
1.网络请求问题:强制要求请求全部为https2.网络请求问题:测试环境可以使用http协议由于小程序开发时域名需要在公众平台备案所以我们学习测试时:点击开发工具右上角“详请”--勾选“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”即可在正常网络环境中测试3.企业类型帐号需支付300元认证费或者用公司账号向腾讯公司打款认证。政府、媒体、其他组织类型帐...原创 2019-01-03 11:14:28 · 1324 阅读 · 0 评论 -
小程序开发之错误记录
1 . http://************* 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html解决方法:由于小程序开发时域名需要在公众平台备案所以我们学习测试时:点击开发工具右上角“详请”–勾选“不校验合法域名、web-v...原创 2019-01-03 11:20:02 · 902 阅读 · 0 评论 -
小程序开发之 try {} catch (e) { } finally{} 解析
try/catch/finally 语句用于处理代码中可能出现的错误信息。错误可能是语法错误,通常是程序员造成的编码错误或错别字。也可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。try语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。finally 语句在 try 和 catch 之后无论有无异常都会执行。...原创 2019-01-18 08:11:55 · 4327 阅读 · 0 评论 -
小程序开发API之获取系统信息wx.getSystemInfo()、wx.getSystemInfoSync()
wx.getSystemInfo()获取系统信息函数参数:返回值:例如:写法一index.js/* brand 设备品牌 model 设备型号 pixelRatio 设备像素比 screenWidth 屏幕宽度,单位px screenHeight 屏幕高度,单位px windowWidth 可使用窗口宽度,单位p...原创 2019-01-18 08:16:13 · 17464 阅读 · 0 评论 -
小程序开发API之更新管理器wx.getUpdateManager()、UpdateManager
wx.getUpdateManager()获取全局唯一的版本更新管理器,用于管理小程序更新。关于小程序的更新机制注:更新机制小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。运行机制小程序没有重启的概念...原创 2019-01-18 08:18:33 · 8187 阅读 · 0 评论 -
小程序开发API之获取启动参数wx.getLaunchOptionsSync()
wx.getLaunchOptionsSync()获取小程序启动时的参数。与 App.onLaunch 的回调参数一致。启动参数referrerInfo 的结构返回有效 referrerInfo 的场景例如:index.js/*启动参数 path 启动小程序的路径 scene 启动小程序的场景值 query 启动小程序的 query 参数 shareTi...原创 2019-01-18 10:43:21 · 19788 阅读 · 0 评论 -
小程序开发API之应用级事件
wx.onPageNotFound(function callback)监听小程序要打开的页面不存在事件。该事件与 App.onPageNotFound 的回调时机一致。参数 function callback小程序要打开的页面不存在事件的回调函数注:开发者可以在回调中进行页面重定向,但必须在回调中同步处理,异步处理(例如 setTimeout 异步执行)无效。若开发者没有调用 wx...原创 2019-01-18 10:45:36 · 1601 阅读 · 2 评论 -
小程序开发API之调试wx.setEnableDebug()、wx.getLogManager()
wx.setEnableDebug(Object object)设置是否打开调试开关。此开关对正式版也能生效。参数 Object objectTips在正式版打开调试还有一种方法,就是先在开发版或体验版打开调试,再切到正式版就能看到vConsole。index.jsPage({ data: { }, onLoad: function (options) {...原创 2019-01-18 10:50:23 · 5639 阅读 · 0 评论 -
小程序开发前的准备工作
废话不多说,下面是官方定义的小程序微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 张小龙说:小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。(其实小程序怎么说呢,这个概...原创 2019-01-03 13:48:21 · 969 阅读 · 0 评论 -
小程序开发工具及代码结构介绍
上一篇文章说了注册和下载等一些准备工作,现在大致介绍一下开发工具与代码结构开发工具(1)打开“微信开发者工具”-- 扫描登录登录后显示创建“小程序项目”和“公众号网页项目”(2)创建之前先在桌面创建一个项目文件夹,如demo(一定要是空的)点击“小程序项目”(初次创建直接进入下图,如果不是初次创建会出现已创建的项目,点击右下角“+”创建新项目)输入上一篇文章我们保存的AppID...原创 2019-01-03 14:07:24 · 403 阅读 · 0 评论 -
小程序开发之全局配置app.json
全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。app.json 配置项列表例如:{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":...原创 2019-01-03 14:25:23 · 3721 阅读 · 0 评论 -
小程序开发之页面配置.json
上一篇文章咱们介绍了App.json全局配置,如果我们不想全局使用,只想在单独页面配置怎么办???小程序为我们提供了页面.json的页面配置文件每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。注:(1)页面的配置只能设置 app.json 中部分 window 配置项的内容(2)页面中配置项会覆盖 app.json 的 window 中相同的配置项。(3)如果页面...原创 2019-01-03 14:33:48 · 2074 阅读 · 0 评论 -
小程序开发API之定时器setTimeout()、setInterval()
定时器setInterval:设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数setTimeout:设定一个定时器。在定时到期以后执行注册的回调函数setTimeout()和setInterval()方法的区别?setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数,表示定时器的编号,这个值可以传递给clearTimeout()用于取...原创 2019-01-18 11:29:33 · 10803 阅读 · 0 评论 -
小程序开发之视图层WXML数据绑定、运算、组合及对象
WXMLWXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来。例如:index.wxml<!--wxml--><view>{{message}}&l...原创 2019-01-07 21:56:59 · 2177 阅读 · 0 评论 -
小程序开发之视图层WXML列表渲染、条件渲染
列表渲染列表wx:for在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item例1:index.wxml<!--index.wxml--><view wx:for="{{array}}">{{item}}</view>index...原创 2019-01-07 22:07:49 · 426 阅读 · 0 评论 -
小程序开发之视图层WXML模板、引用(import和include)
模板WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。定义模板使用 name 属性,作为模板的名字。然后在内定义代码片段例如:index.wxml<!-- index: int msg: string time: string--><template name="msgItem"> <view>...原创 2019-01-07 22:13:02 · 952 阅读 · 0 评论 -
小程序开发之视图层WXML绑定事件
事件什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches。事件的使用方式在组件中绑定一个事件处理函数。如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。例如:...原创 2019-01-08 08:59:51 · 1189 阅读 · 0 评论 -
小程序开发API之提示框wx.showToast()、wx.showModal()、wx.showLoading()、wx.showActionSheet
wx.showToast(Object object)显示消息提示框wx.showToast参数object.icon 的合法值wx.hideToast(Object object)隐藏消息提示框wx.hideToast参数例如:效果展示首先找一张图片,命名CSDN.png工程中在最外层创建image,拖入CSDN.png图片代码index.wxml &amp;lt;...原创 2019-01-18 15:39:43 · 15577 阅读 · 3 评论