微信小程序把玩
_RTFSC_
是什么?为什么?怎么做?
展开
-
微信小程序把玩(三十七)location API
location API也就分这里分两种wx.getLocation(object)获取当前位置和wx.openLocation(object)通过经纬度打开内置地图。其中定位获取位置信息返回参数是有问题的speed,accuracy这两个是没有的。还有一个就是打开内置地图之后再返回会报一个错误(Page route错误—WAService.js:2 navigateBack 一个不存在的webv原创 2016-09-30 07:23:30 · 24247 阅读 · 6 评论 -
微信小程序把玩(三十)wx.request(object) API
这里通过代码加的API接口真实请求下数据。如果提示URL 域名不合法,请在 mp 后台配置后重试修改asdebug.js两行代码即可可看下面图定位到asdebug.js文件打开搜索关键字URL 域名不合法关键字就是提示错误信息注释两行代码主要方法:wxml<block wx:for-items="{{result}}"> <view style="width:100%; height: 50原创 2016-09-27 12:19:16 · 47252 阅读 · 7 评论 -
微信小程序把玩(二十九)video组件
视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的重要属性:wxml<!--监听button点击事件--><button bindtap="listenerButton">点击显示视频组件</button><!--视频组件src资源地址,binderror为监听错误信息--><video src="http://mvvideo1.meitudata.com/575c2b652d原创 2016-09-26 23:42:18 · 21090 阅读 · 16 评论 -
微信小程序把玩(二十七)audio组件
音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用)主要属性: wxml<audio action="{{action}}" src='http://sc1.111ttt.com/2016/1/09/26/202261732256.mp3' poster= 'http://avatar.csdn.net/E/3/9/1_u014360817.j原创 2016-09-26 18:32:58 · 10570 阅读 · 5 评论 -
微信小程序把玩(二十六)navigator组件
navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面。用redirect属性指定。主要属性:wxml<navigator url="../index/index">点击跳转不关闭当前页面</navigator><navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator>原创 2016-09-26 17:34:35 · 46193 阅读 · 1 评论 -
微信小程序把玩(二十五)loading组件
loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性:wxml<!----><button type="primary" bindtap="listenerButton">显示loading</button><!--默认隐藏--><loading hidden="{{hiddenLoading}}">正在加载</loading>jsPage({ dat原创 2016-09-26 17:30:56 · 21488 阅读 · 4 评论 -
微信小程序把玩(二十四)toast组件
toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的主要属性:wxml<!--点击button触发toast--><button type="primary" bindtap="listenerButton">点击显示toast</button><!--toast消息框显示3秒,并原创 2016-09-26 16:32:36 · 12525 阅读 · 2 评论 -
微信小程序把玩(二十三)modal组件
modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等。常用属性:wxml<!--监听button点击事件--><button bindtap="listenerButton" type="primary">弹出modal</button><!--弹出框--><modal title="退出应用" hidden="{{hiddenModal}}原创 2016-09-26 16:09:46 · 29128 阅读 · 7 评论 -
微信小程序把玩(三十一)wx.uploadFile(object), wx.downloadFile(object) API
反正我是没有测通这两个API!!!!不知道用的方式不对还是其他的!!!先记录下回头再说。。。主要方法:wx.uploadFile(OBJECT)上传wx.downloadFile(OBJECT)下载wxml<button type="primary" bindtap="listenerButtonDownLoadFile">下载图片</button><image src="{{resource}}"原创 2016-09-27 21:00:09 · 17132 阅读 · 10 评论 -
微信小程序把玩(三十二)Image API
选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用主要方法:wx.chooseImage(object)wxml<!--监听按钮--><button type="primary" bindtap="listenerButtonChooseImage">点击我选择相册</button><!--通过数据绑定的方式动态获取原创 2016-09-27 22:25:44 · 14956 阅读 · 0 评论 -
微信小程序把玩(四十一)canvas API
绘图是每个移动应用必备的技术,基本上和Android,IOS,ReactNative,等移动开发都是相同的,创建个上下文,给你个画布再上画,这里的属性参数比较多就分开看了,想深入研究那就看自己的了。。。屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法微原创 2016-10-04 11:07:11 · 23167 阅读 · 0 评论 -
微信小程序把玩(四十)animation API
动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入。wx.createAnimation(object)看官方介绍1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。2.调用动画操作方法后要调用 step() 来表原创 2016-09-30 16:26:06 · 61862 阅读 · 3 评论 -
微信小程序把玩(三十九)navigation API
演示效果也看到了小程序也就提供这几个处理导航控制。值得注意的是只能同时导航五个页面主要属性:导航条一些方法wx.setNavigationBarTitle(object) 设置导航条的Title导航标题可以通过三种方式设置,第一种是通过全局配置名字统一,第二种就是在page中新建个json文件配置它会覆盖全局配置的title,第三种就是通过API设置。wx.showNavigationBarLoad原创 2016-09-30 10:23:15 · 25410 阅读 · 2 评论 -
微信小程序把玩(三十八)获取设备信息 API
获取设备信息这里分为四种,主要属性:网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo,重力感应数据wx.onAccelerometerChange,罗盘数据wx.onCompassChangewxml<button type="primary" bindtap="getNetWorkType">获取网络类型</button><button type="p原创 2016-09-30 07:48:36 · 20757 阅读 · 5 评论 -
微信小程序把玩(三十六)Storage API
其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步异步存储方法:存数据 wx.setStorage(object) 相同key会覆盖,可写回调方法获取方法:wx.getStorage(object)清除方法:wx.clearStorage()里面可以写回调函数 成功,失败,完成同步存储方法:存数据 相同key会覆盖wx.setStorageSync原创 2016-09-29 18:47:32 · 57156 阅读 · 1 评论 -
微信小程序把玩(三十五)Video API
电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath文档写的有点问题。主要属性:wx.chooseVideo(object)成功之后返回参数wxml<button type="primary" bindtap="listenerBtnOpenVideo">打开视频</button><原创 2016-09-29 17:11:51 · 17678 阅读 · 0 评论 -
微信小程序把玩(三十四)Audio API
没啥可值得太注意的地方重要属性:1. wx.getBackgroundAudioPlayerState(object) 获取播放状态2.wx.playBackgroundAudio(object)播放音乐3.wx.pauseBackgroundAudio()暂停音乐4.wx.seekBackgroundAudio(object) 设置播放进度5.wx.stopBackgroundAudio()停止播原创 2016-09-28 13:14:09 · 10500 阅读 · 4 评论 -
微信小程序把玩(三十三)Record API
其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道是不是因为电脑测试的原因,只能等公测或者等他们完善。以后再测和补充吧!!!!主要属性:wx.startRecord(object)手动调用wx.stopRecord()停止录音wxml<!--用于记录时间--><text>{{formatRecordTime}}</text><button ty原创 2016-09-28 10:48:16 · 8704 阅读 · 2 评论 -
微信小程序把玩(二十二)action-sheet组件
action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件主要属性:wxml<!--触发action-sheet事件--><button typ原创 2016-09-26 15:48:44 · 26723 阅读 · 3 评论 -
微信小程序把玩(二十一)switch组件
switch开关组件使用主要属性:wxml<!--switch类型开关--><view>switch类型开关</view><switch type="switch" checked="true" bindchange="listenerSwitch"/><!--checkbox类型开关--><view>checkbox类型开关</view><switch type="checkbox" bi原创 2016-09-26 14:42:25 · 20190 阅读 · 4 评论 -
微信小程序把玩(二十)slider组件
slider滑动组件用的不太多,在其他平台反正我是用的不多主要属性:wxml<slider max="100" step="10" show-value="true" bindchange="listenerSlider"/>jsPage({ data:{ // text:"这是一个页面" }, /** * 监听slider */原创 2016-09-26 11:53:38 · 12677 阅读 · 0 评论 -
微信小程序把玩(九)scroll-view组件
scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块主要属性:使用演示:wxml<!--垂直滚动,这里必须设置高度--><scroll-view scroll-y="true" style="height: 200px"> <view style=原创 2016-09-25 10:36:41 · 101721 阅读 · 5 评论 -
微信小程序把玩(八)view组件
刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样主要属性:flex-direction: 主要两个特性”row”横向排列”column”纵向排列justify-content 主轴的对齐方式(如果flex-direction为row则主轴就是水平方向) 可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’,原创 2016-09-25 09:13:37 · 35887 阅读 · 2 评论 -
微信小程序把玩(七)数据绑定
数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示。看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的。这里先记录下data.wxml<!--数据绑定使用对象---内容--><view>{{message}}</view><!--数据绑定使用对象---组件属性---需要在双引号之内--><view id="item-{{id}}">组件属性原创 2016-09-24 17:24:45 · 11142 阅读 · 0 评论 -
微信小程序把玩(六)模块化
模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口。我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */function formatTime(date) { //获取年月日 var year = date.getFullYear() var month = date.getMonth()原创 2016-09-24 16:13:30 · 13082 阅读 · 0 评论 -
微信小程序把玩(五)页面生命周期
这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写。以下是官网给出的生命周期函数方法和状态图上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只有慢慢尝试和摸索代码处理:这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改!下面贴下代码注释也比较详细index.wxml<!--index.原创 2016-09-24 15:40:36 · 42424 阅读 · 0 评论 -
微信小程序把玩(四)应用生命周期
App() 函数用来注册一个小程序,注意必须在 app.js 中注册,且不能注册多个。 使用方式也跟Android中的Application中初始化一些全局信息以供使用。方法:应用生命周期代码:原创 2016-09-24 13:03:38 · 6124 阅读 · 0 评论 -
微信小程序把玩(三)tabBar底部导航
tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项主要属性:对于tabBar整体属性设置:对于tabBar中每个Item属性设置:下面是官网一张图对tabBar描述:app.json的配置相对就简单了:原创 2016-09-24 12:28:34 · 104957 阅读 · 15 评论 -
微信小程序把玩(二)window配置
本篇默认已经成功安装微信小程序工具新建项目AppID查看公众开发平台设置查看(https://mp.weixin.qq.com) 项目名称随意填写本地开发项目: 新建一个空的文件夹勾线当前会生成一个项目打开项目更详细的说多了也没啥意义看官网的简易教程非常详细!!!!!!!!! https://mp.weixin.qq.com/debug/wxadoc/dev/?原创 2016-09-24 12:14:00 · 20486 阅读 · 3 评论 -
微信小程序把玩(十)swiper组件
Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些。主要属性:属性只需要设置就行了 也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理。wxml<!--是否显示圆点,自动播放,原创 2016-09-25 11:24:14 · 36437 阅读 · 0 评论 -
微信小程序把玩(十一)icon组件
这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色。主要属性:使用方式:wxml<!--成功图标--><icon type="success" size="40"/><!--安全成功标志图标--><icon type="safe_success" size="40"/><!--提示信息图标--><icon type="info" size="40"/><!--带圆的信息提示图标-原创 2016-09-25 20:48:02 · 18462 阅读 · 1 评论 -
微信小程序把玩(十九)radio组件
radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性:wxml<!--设置监听器,当点击radio时调用--><radio-group bindchange="listenerRadioGroup"><!--label通常与radio和checkbox结合使用--> <label style="display: flex" wx:for-i原创 2016-09-26 11:42:31 · 33235 阅读 · 8 评论 -
微信小程序把玩(十八)picker组件
picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥!没法手机测试现在也不知道咋回事!!主要属性:普通选择器时间选择器日期选择器wxml<view>普通选择器</view><!--mode默认selector range数据源value选择的index bindchange事件监听--><picke原创 2016-09-26 11:12:02 · 83093 阅读 · 14 评论 -
微信小程序把玩(十七)input组件
input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义。input属性也不是很多,有需要自己慢慢测,尝试主要属性:wxml<!--style的优先级比class高会覆盖和class相同属性--><view class="inputView" style="margin-top: 40% "><input class="input" type="number" plac原创 2016-09-26 10:04:02 · 56172 阅读 · 5 评论 -
微信小程序把玩(十六)form组件
form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个submit,reset属性分别对应form的两个事件主要属性: wxml<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" > <checkbox-group na原创 2016-09-26 07:44:01 · 10054 阅读 · 4 评论 -
微信小程序把玩(十五)checkbox组件
不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-group(只能包含checkbox)中设置监听事件。checkbox-group监听方法:checkbox多选属性:wxml<!--checkbox-group就是一个checkbox组 有个监听事件bindchange,监听数据选中和取消--><c原创 2016-09-26 07:02:24 · 28302 阅读 · 2 评论 -
微信小程序把玩(十四)button组件
button按钮用的算是最普遍的组件之一。主要属性:wxml<!--按钮默认样式,点击事件--><button type="defaule" bindtap="clickButton">Defalut</button><!--原始颜色,不可点击状态, 正在加载状态--><button type="primary" disabled="true" loading="true">Primary</b原创 2016-09-25 22:14:20 · 39222 阅读 · 1 评论 -
微信小程序把玩(十三)progress组件
进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度…主要属性:wxml<progress percent="80" show-info="true" stroke-width="5" color="red" active="true"/>原创 2016-09-25 21:43:33 · 9579 阅读 · 2 评论 -
微信小程序把玩(十二)text组件
通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字。wxml<view > <text>我是文本组件</text></view><text>{{text}}</text>jsPage({ /** * 初始化数据 */ data:{ text:"我是在js文件中绑定的文本" }, onLoad:function(op原创 2016-09-25 21:20:02 · 10011 阅读 · 5 评论 -
微信小程序把玩(一)Hello WeApp
本篇默认已经成功安装微信小程序工具新建项目AppID查看公众开发平台设置查看(https://mp.weixin.qq.com) 项目名称随意填写本地开发项目: 新建一个空的文件夹勾线当前会生成一个项目打开项目更详细的说多了也没啥意义看官网的简易教程非常详细!!!!!!!!! https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089807原创 2016-09-24 11:46:55 · 14216 阅读 · 1 评论