
微信小程序
文章平均质量分 52
zhoushenxian
我是一个菜鸟android开发工程师,目前从事电视端开发
展开
-
微信小程序断点调试
做开发总会遇到bug,那么就需要调试,调试一般要么是打log,要么是断点调试,那么在微信小程序怎么断点调试呢?这和我们做Java或者Android 调试还是不一样的,微信小程序调试时先打开调试器,然后在Sources下,如图:然后找到你要调试的代码,比如你要调试的是app.js中代码:在你需要调试的地方左键就ok了. ...原创 2018-11-13 10:05:11 · 4519 阅读 · 0 评论 -
微信小程序全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等先看下官网给的例子:{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo.原创 2018-11-12 17:37:28 · 6826 阅读 · 0 评论 -
微信小程序页面配置
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项例子:{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black",...原创 2018-11-12 17:42:17 · 704 阅读 · 0 评论 -
微信小程序使用template复用组件
比如在android中有一些布局是在好几个界面都会出现,那我们肯定会把这公共的部分抽取出来,然后在layout xml文件中使用标签<layout>把它引入进来,那么在微信小程序中template起的作用就是android中的layout标签的作用 我们在官网文档中也能找到对template的描述WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地...原创 2018-11-14 16:29:34 · 2273 阅读 · 0 评论 -
微信小程序中template点击失效的解决方案
假如我想点击一个列表中的子item跳转到另外一个界面<import src="posts-item/posts-item-template.wxml" /><view><block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx"> <templa原创 2018-11-14 18:44:08 · 2296 阅读 · 0 评论 -
微信小程序组件自定义属性及获取属性
比如我们有一个列表,点击每个列表中每个子item,把id带到下一个页面<import src="posts-item/posts-item-template.wxml" /><view><block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx"><原创 2018-11-14 18:55:13 · 15700 阅读 · 0 评论 -
微信小程序界面之间跳转传值
比如我想从A界面跳转到B界面,然后想把一个id值传递到下一个界面怎么做,在android中我们都是使用Intent或者bundle来传值的,那么在微信小程序是怎么传递值的呢?很简单 wx.navigateTo({ url: 'posts-detail/posts-detail?id='+id, })就好像我们http请求中的get传参数一样,那么在另外界面怎么拿到这个...原创 2018-11-14 19:30:45 · 549 阅读 · 0 评论 -
微信小程序自定义导航栏
在微信小程序中导航栏是可以直接配置的:navigationStyle String default 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮 微信版本 6.6.0 目前只支持二种,但是我们的需求可能需要一个其他的颜色等,那么不得不修改这个了,"window":{ "navigationStyle":...原创 2018-11-21 13:20:54 · 8026 阅读 · 0 评论 -
微信小程序获取经纬度信息
查微信小程序文档左侧导航有个位置,提供了获取经纬度的方法wx.getLocation(Object object)调用前需要 用户授权 scope.userLocation获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用参数Object object属性 类型 默认值 必填 说明 最低版本 type string ...原创 2018-11-21 13:54:27 · 1096 阅读 · 0 评论 -
微信小程序音乐播放器
小程序实现音乐播放相当的简单,官方给了二种实现音乐播放第一种: /** * 音乐播放器 */ playMusic: function (event){ wx.BackgroundAudioManager({ dataUrl: 'http://music.163.com/song/media/outer/url?id=108220.mp3',...原创 2018-11-19 10:15:48 · 11791 阅读 · 1 评论 -
微信小程序 应用程序生命周期
android中应用生命周期开始是从Application开始的,你可以在四大组件中获取Application,然后设置值在Application,然后在只要有Context对象中就能获取到这个值,在小程序中比如音乐播放器要控制它的播放和暂停图标的话,也需要全局的一个变量去控制,那么在小程序中这个怎么去设置全局的概念呢?在app.js中App({ globalData:{ i...原创 2018-11-19 11:44:00 · 208 阅读 · 0 评论 -
微信小程序 target和currentTarget区别
比如有一个列表,每个子项都可以点击,我们可以把点击事件放在图片上也可以直接放在子项的根组件上,target:指的是当前点击的组件currentTarget:指的是事件捕获的组件<view catchTap = "fetchImage"> <image src="a.png" data-postId = "item.id"></view> ..原创 2018-11-19 13:58:30 · 989 阅读 · 0 评论 -
微信小程序选项卡
在android中之前很流行的主界面布局就是下面几个bottom,然后点击进行切换,这个效果在小程序中实现起来更是简单的不行官网文档中有一个全局配置,然后找到复制就行"tabBar": { "backgroundColor": "#eee", "selectedColor":"#ff0000", "borderStyle":"white", &原创 2018-11-19 15:09:03 · 313 阅读 · 0 评论 -
微信小程序 生成Page的小技巧
比如我们要展示一个详情页数据,那么首先一般在Page下新建一个detail文件夹,然后床detail.js,.detailwxml,detail.json,detail.wxss四个文件,是不是很麻烦,其实你可以在app.json文件中写你要生成的路径 编译后会自动帮你生成对应的文件夹和文件: ...原创 2018-11-19 15:40:28 · 5844 阅读 · 3 评论 -
微信小程序 提示如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:“详情-域名信息”
如果你访问网络,遇到这个问题,怎么解决呢?其实很简单,在开发面板找到详情然后点击勾选就好了.原创 2018-11-19 20:02:25 · 14513 阅读 · 8 评论 -
微信小程序 图片选择器
android开发中经常使用到头像上传需求,选择图片有二种方式,第一种是从相册中选择还有一种就是拍摄,小程序也有这个功能,而且比android容易多了,先看官网给的文档:wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照参数Object object属性 类型 默认值 必填 说明 最低版本 count...原创 2018-11-23 11:39:24 · 2125 阅读 · 0 评论 -
微信小程序文件结构
学习微信小程序就是一个不断熟练它的api过程,当然了你创建一个微信小程序项目 整个目录结构是什么样的,还有它是怎么构成的,代表啥意思.这些都是来自官网文档 ,我只是学习记录下 怕忘记小程序包含一个描述整体程序的 app 和多个描述各自页面的 page一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:先看下我创建的微信小程序项目的目录结构:对比我们androi...原创 2018-11-12 16:52:40 · 565 阅读 · 0 评论 -
微信小程序将业务中数据分离到单独的文件中
js中是处理业务逻辑的,但是上次我们写列表展示的数据都是放在定义在js文件中,这肯定是不好的,最好把数据和业务逻辑分开,我们想办法把数据写到单独的文件中,然后再js中引入进来就可以,这样维护起来也很方便. 创建一个文件夹data 然后在这个文件夹下创建一个posts-data.js文件,把json数据放在这个文件中:那么当我想要这个数据时,怎么引入这个json数据呢?在post...原创 2018-11-14 15:45:16 · 1749 阅读 · 1 评论 -
微信小程序列表页
我们在做Android开发时,几乎每个app都有几个列表,在Android中列表一般是用listview,后来就使用recyclerview做了,不管是小程序还是Android或者ios,列表都是常见的一种数据展示方式,那么在小程序中怎么实现呢?先使用最笨的方法做,如图:针对上面的列表分析:它整体是一个垂直布局,第一部分 头像+日期是一个横向布局,下面是一张图片,再下面是一段文字描述,...原创 2018-11-14 15:08:12 · 4904 阅读 · 2 评论 -
从零开始写小程序启动界面
我们创建微信小程序都是有默认的启动界面的,我现在把它默认的文件都删除了,因为是新手么,所以想自己练练,然后我们要创建app.js ,app.json,app.wxss这三个配置文件然后点击对应的,创建文件就可以了比如我新建了如下项目结构:然后我们在welocme.wxml中写一个文件控件显示hello world<view><text>hello...原创 2018-11-13 10:49:41 · 1692 阅读 · 0 评论 -
微信小程序全屏显示以及导航栏问题
我们在做Android的时候想改变整个布局的颜色很简单,但是在微信小程序中如果你的内容没填充屏幕的话,你想改变整个布局的颜色在view的属性中去设置background-color是没有用的,这就相当于我们Android中设置的额wrap-parent我的布局如下:属性:.container{display: flex;flex-direction: column;al...原创 2018-11-13 14:14:31 · 9420 阅读 · 0 评论 -
微信小程序text控件部分字体文字大小和颜色设置四
在我们android中有的时候会要求textview控件显示文字部分颜色不同而且大小也不同,这个在微信小程序中怎么做呢?因为在微信小程序中所有的显示都是通过标签来实现的,那么标签时可以嵌套的,比如显示hello world 要求hello颜色是红色 而且字体大小为50rpx;<text class='user_msg'><text class="hello">hell...原创 2018-11-13 14:26:17 · 103724 阅读 · 0 评论 -
微信小程序轮播图的实现
在Android或者ios中几乎所有的app都有轮播图这个效果,在android中一般是使用viewpager来实现的,在微信小程序中一般是用swiper这个标签来实现的,我们在微信小程序文档中可以查看所有的标签,如图:这些组件看做是Android的什么textview,button imageview等就行了.swiper在文档中是指:滑块视图容器它的属性如下:属性名 ...原创 2018-11-13 16:13:50 · 106201 阅读 · 23 评论 -
微信小程序报错:Please do not register multiple Pages in undefined.js 解决方案
准备学习下微信小程序的逻辑控制,逻辑控制是写在.js中 ,于是我新建了一个posts.js文件 想看下页面的生命周期运行发现报错:后面就是各种试,发现全局的app.js也写了几个,于是我把app.js代码清空,发现好了.还要注意一点就是加入你小程序有好几个界面,当你把app.js清空了后,每个界面的.js文件都不能为空,不然报这个错:上面已经提示了. ...原创 2018-11-13 17:16:06 · 9906 阅读 · 0 评论 -
微信小程序的Page页面的生命周期
我们知道Android中关于Activity的生命周期有什么onCreate() onStart() onResume() onStop()等,在android中Activity对应的是一个界面,那么Page在微信小程序对应的也是一个界面,它也有属于自己的声明周期,我们查看官网文档:页面PagePage(Object) 构造器Page(Object) 函数用来注册一个页面。接受一个 ...原创 2018-11-13 17:36:15 · 2448 阅读 · 0 评论 -
微信小程序数据绑定
在实际的开发中,数据大部分都是来自后台,比如我们创建微信小程序获取个人头像和名字,今天就学习下数据绑定,在官方文档中: 视图层 View框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。WXML(WeiXin Markup language) 用于描述页面的结构。WXS(WeiXin Scri...原创 2018-11-13 19:38:29 · 753 阅读 · 0 评论 -
微信小程序的事件机制
比如我们android从一个activity跳转到另一个activity,是通过Intent,而在小程序中从一个界面跳转到另外一个界面是通过什么方式呢?而事件又是什么东东?什么是事件事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, datase...原创 2018-11-13 20:53:08 · 1241 阅读 · 0 评论 -
微信小程序入门(一)
公司由于app不做了,叫我做微信小程序,我也是醉了,混口饭吃不容易,只好去学了,学习微信小程序开发要对微信小程序文档熟悉,也是很少见的是用中文写的文档,china人终于不用看英文文档了. 我们不管做什么开发都是配置环境,但是微信小程序环境搭建就很简单.先进入:https://mp.weixin.qq.com/cgi-bin/wx最上面有个小程序 点击进入,如果没有登录,是要先登录的...原创 2018-11-08 17:55:59 · 191 阅读 · 0 评论 -
微信小程序 三级菜单
微信小程序实现三级菜单真的很简单,使用的组件是picker,我们看下它的官网描述:从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器 mode取值有如下:普通选择器:mode = selector多列选择器:mode = multiSelector时间选择器:mode = tim...原创 2018-11-15 15:35:46 · 6553 阅读 · 0 评论 -
微信小程序wxml引用
在微信小程序文档中有个视图层下面是wxml 有个引入,之前引入就讲了一个import,今天看到官网还有一种方式就是include这个和我们android中引入布局是一样的,WXML 提供两种文件引用方式import和include importimport可以在该文件中使用目标文件定义的template,如:在 item.wxml 中定义了一个叫item的template:...原创 2018-11-15 15:42:38 · 2017 阅读 · 0 评论 -
微信小程序this.data和this.setData()的区别
this.data是用于同步 this.setData({})是用于异步,比如网络请求比如this.data.itemData = itemData 这句话是什么意思呢?其实是把右边的itemData数据放在Page中的data{ itemData:{} }等同于下面的意思,然后就可以在这个界面使用这个数据了....原创 2018-11-15 19:46:13 · 3524 阅读 · 0 评论 -
微信小程序缓存的设置
微信小程序是没有数据库概念的,但是有缓存,如果不清空缓存数据,数据就一直在存在缓存中,那么怎么缓存数据呢?很简单?后缀带sync是同步,这些方法都是成对出现的,remove...是清空缓存,get...是获取缓存 如果要修改缓存 key保持一变,value变了就行了,clear...是清空所有缓存 wx.setStorage({ key: 'username', ...原创 2018-11-15 20:29:05 · 15871 阅读 · 0 评论 -
微信小程序 图片显示切换
比如我们常用的收藏功能,当你收藏了后就显示收藏后的图片,没有收藏一般显示一个比较浅点的颜色,那么这个功能在小程序如何实现呢?因为小程序的组件数据都是绑定的,一般这么写: <image wx:if="{{isColect}}" class='collect_img' src='/images/collection.png' bindtap="onCollect"></i...原创 2018-11-15 22:04:17 · 4457 阅读 · 0 评论 -
微信小程序 方法之间值传递
比如我在onLoad()方法中获取到一个参数,然后呢我点击某个组件的时候,需要用到这个参数,那么怎么获取到onLoad()方法中获取到的id值呢,可以通过data{}中转一下: * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("postData--->" + postData); var...原创 2018-11-15 22:40:34 · 3860 阅读 · 0 评论 -
微信小程序自定义组件
如果很多界面使用到了很多同样的样式,那么就要想到复用了,这样好维护还能提高效率,那么怎么自定义组件呢?看官方文档自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组...原创 2018-11-27 23:04:51 · 533 阅读 · 0 评论