在微信小程序中想要实现下拉刷新,是很方便的。但是如何使用,在文档上找起来却不是很方便,所以便记录一下。话不多说,直接上文档截图

距离微信小程序内测版发布已经有十天的时间了,网上对微信小程序的讨论也异常火爆,从发布到现在微信小程序一直占领着各种技术论坛的头条,当然各种平台也对微信小程序有新闻报道,毕竟腾讯在国内影响力还是很大的。我们都知道微信小程序第一天发布内测版,并没有公开官方开发文档和开发工具,但是这阻止不了技术人的好奇心,通过破解以及先安装旧版本再用新版本覆盖安装一系列流程,即可体验微信小程序的魅力,当时为了使更少的人少走弯路,于是自己就写了微信小程序开发环境搭建一文。不过在文章发布第二天微信官方正式发布了官方文档,并且更新了开发工具,无·appid也可以体验小程序的开发。因为自己对小程序也是很有兴趣的,感觉是很有意思的一个东西,所以以QQ练手,做一个高仿QQ的微信小程序,由于本人是Android开发者,平时很少接触前端的一些东西,水平有限,所以代码很多地方是不规范的,做的过程也就是一个学习的过程,一个提高的过程。

系列教程:玩转微信小程序怎样将「服务号」改造成「小程序」?玩转微信小程序微信小程序项目结构及配置玩转微信小程序微信小程序名片夹详情页开发玩转微信小程序名片盒「我」的页面详解编辑名片有两条路径,分为新增名片流程与修改名片流程。用户手填新增名片流程如下:

图片 1

这篇文章主要写我在SmallAppForQQ这个项目进展的过程中遇到的一些问题。如果阅读此文的你有一定帮助,很是欣慰,欢迎star项目

图片 2图片 3图片 4首先跳转到我们的新增名片页面
1 需要传递用户的当前 userId,wx.navigateTo 带值跳转。Manual 为 true
设置用户走的是新增路线。Vertical
加上就是纵向滑动,去掉即是左右滑动。整体结构如下所示:图片 5新增名片页面
1
基本布局如下:图片 6取到
userId。图片 7使用微信自带的
input 组件验证也非常好用,如 maxLength
属性,可以限制用户输入长度,如我这的姓名长度是最大 5 位,直接数字 5
即可。图片 8也可以自定义一些验证效果,具体可以根据需求进行一些验证配置,取到用户输入的值,进行操作。图片 9这里绑定了自带的模态框提示组件。图片 10其中
modalHidden2 是模态框开关。另外 proptText
是需要提示的内容。即使很多输入框也支持数据动态改变,非常方便。图片 11实际效果,非常快捷,比以前省去很多事情,编写小程序,发现最大的好处可能就是我们不必去考虑一系列兼容性问题。图片 12最后还有个头像上传图片,测试了下目前上传到后台服务器还有点问题,应该是内测版本不太完善导致吧。图片 13设置的直接是背景图片。图片 14提交表单与跳转。提交表单使用的是自带的
bindsubmit 事件组件,在 button 组件上添加 formType=”submit”
即可,还有点需注意的是使用表单提交功能时 input 需加上 name
属性,这个传递方式是以键值对的形式传递的。图片 15这时候跳转到编辑页
2
页面,这个页面是根据用户填写的手机号码识别到匹配的公司,页面非常简单,一个数据循环而已,单选框日后可能还需要美化一下。图片 16同样也是一些数据绑定以及验证效果。图片 17实际渲染效果可以看到。图片 18这个和第一个编辑页面逻辑基本不相上下,一些基本验证与提交,这里就讲到前面两步骤即可,编辑页面3也是同理,这里不再过多啰嗦。修改名片流程效果图与需求,修改名片是一次性把以前填写的个人信息全部渲染出来,供用户来改动:图片 19这名片图片模块,上传图片暂时还有点问题,这里就是模仿了个跳转组件,比较建议需要跳转的页面还是使用
wx.navigateTo 控制好一点,wx.navigateTo 提供了给我们不同的 3
个跳转路由,封装的都很好,而且跳转页面很多牵连到传值之类的,可以达到统一管理也可以避免一些看不到的
bug
吧,总之还是根据业务需求来定:图片 20姓名手机必填模块:图片 21个人信息模块,直接循环出来:图片 22Onload
时我们请求必填与选填数据:

很明显,enablePullDownRefresh
这个属性设置为true。就默认开启了下拉刷新。enablePullDownRefresh可以
写在app.json 中 和页面的***.json

文章开头,先简单介绍下项目结构,若没有安装开发工具,可去GitHub:

  • requiredGroup 必填中文信息
  • notRequiredGroup 选题中文信息
  • requiredGroupEn 必填英文信息
  • notRequiredGroupEn 选题英文信息

app.json

  • WXML(WeiXin Markup
    Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件。

  • WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,

  • js 逻辑处理,网络请求

  • json 小程序设置,如页面注册,页面标题及tabBar。

//请求名片对应的公司的中文信息的属性组数据,分为必填和选填//选题项变量以 no 开头requester.getOfflineCardInfoGroupFields(userId, cardId,function {//debuggervar userName = res.card.userName;var mobile = res.card.mobile;var requiredGroup = res.requiredGroupCh;var notRequiredGroup = res.notRequiredGroupCh;var requiredGroupEn = res.requiredGroupEn;var notRequiredGroupEn = res.notRequiredGroupEn;var reqLen = requiredGroup.fields.length;var nreqLen = notRequiredGroup.fields.length;var reqLenEn = requiredGroupEn.fields.length;var nreqLenEn = notRequiredGroupEn.fields.length;self.setData({userName: userName,mobile: mobile,requireFields: requiredGroup.fields,notRequireFields: notRequiredGroup.fields,requireFieldsEn: requiredGroupEn.fields,notRequireFieldsEn: notRequiredGroupEn.fields,l1: reqLen,l2: nreqLen + reqLen,l3: reqLenEn + nreqLen + reqLen});self.forceUpdate();}, function (code, msg) {console.info("code=" + code + "&msg=" + msg);});

图片 23

注意:为了方便开发者减少配置项,规定描述页面的这四个文件必须具有相同的路径与文件名。

中英文信息必填与选填渲染:

***.json

在根目录下用app来命名的这四中类型的文件,就是程序入口文件。

图片 24这里表单提交数据转换有点复杂(大家根据业务需求来做,不必花时间研究这里的方法),获取的是数组,按照后台需要的数据格式进行转换传递过去。图片 25今天再回去理下首页
A、B、C
定点跳转功能实现方法。图片 26首先是右边小索引布局以及数据绑定,数据绑定和名片夹列表上的字母一样,该字母下面有名片则渲染出来,没有则不需要渲染,id同样是当前字母与右边显示的内容一样:图片 27数据
sort,和 group.name
数据一样:图片 28这里是因为
# 不支持设为 id(就是
id=”#”),故而进行了一个转化。图片 29点击事件:获取到当前
ID,以及绑定数据 toView 为当前
ID。图片 30首先名片列表,名片上的字母索引都在
scroll-view 里面,这个 scroll-view 必须设置好固定的高度,设置成 100% 与
100vh 是无效的,y 轴的滚动开关打开,scroll-into-view
需要跳转到它子元素的 id
上。图片 31可以看下:图片 32这个
group.name==sortmsg,等于就是 A==A,B==B
同理。图片 33图片 34在这里如顶部有些菜单栏的话,你就要注意好布局了,不然会出现向下偏移这个菜单栏的高度,其实你只要和字母索引同级下即可避免此问题(这里的顶部菜单以模板分离出去了,分离模板的时候需注意下,需要在这里绑定模板的一些数据会出现失效,具体没有继续深入研究下去)。图片 35跳转功能基本实现(ohter
就是 #
底部)。图片 36好了,今天更新到这里,下一篇我们聊聊「微信小程序分组功能开发及其它小功能完善」。Hello小程序将与您共同成长。微信号:130870319
QQ群:40726600

图片 37

  • app.json必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。

  • app.js必须要有这个文件,没有也是会报错!但是这个文件创建一下就行
    什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

  • app.wxss全局配置的样式文件,项目非必须。

两者的区别是,app.json 是全局型的下拉刷新,而***.json
是单个页面的下拉刷新,只能设置window相关的配置项,以决定本页面的窗口表现,所以无需写window这个键。

知道小程序基本文件结构,就可以开始研究官方demo了,研究过程中如果有不明白的地方可以去官方文档寻求答案,如果找不到答案或者有疑问,可再此博客留言,相互交流。下面介绍下出现概率较高的几个问题。

剩下的就是监听下拉刷新了,直接上代码。

微信小程序新定义了一个尺寸单位,可以适配不同分辨率的屏幕,它规定屏幕宽为750rpx,如在
iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =
750物理像素,1rpx = 0.5px = 1物理像素。

图片 38

图片 39这里写图片描述

wx.stopPullDownRefresh()
是隐藏下拉刷新动画icon。剩下的就是下拉刷新后你要写的逻辑了

这个项目我用的都是rpx尺寸单位,期间遇到一个很奇葩的问题。在相邻的两条信息直接都会有一个分割线,我将线的高度都设置成1rpx,但是不有个别分割线是不显示的,如下图

图片 40这里写图片描述

看到没在第一条和第二条直接并没有现实这条线,但是其他的都展示了,分割线的属性是一样的,而且在不同的手机上不显示的分割线也是不同的,有的分辨率好几条分割线都不显示,不知道这是模拟器的bug还是rpx的bug。最后分割线的高度尺寸单位使用了px,解决了这个问题。

图片 41这里写图片描述

在微信小程序刚出来的时候如果输入AppID提示这个信息就表示没有破解,但是现在官方软件更新可以选择无AppID开发,如下图,我们之间选择无AppID,即可解决此错误。建议安装官方开发工具。可去此处找下载链接。

图片 42这里写图片描述

微信小程序创建项目时选择无AppID,创建项目时会生成app.json,app.josn是程序启动最重要的文件,程序的页面注册,窗口设置,tab设置及网络请求时间设置都是在此文件下的。如果你创建的项目目录下没有app.json文件就会报下面的错误。

发表评论

电子邮件地址不会被公开。 必填项已用*标注