手把手教你开发微信应用号第二弹

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看259 回复回复3 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 259|回复: 3
收起左侧

手把手教你开发微信应用号第二弹

[复制链接]
瑶池 发表于 2016-9-24 22:12:42 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
本帖最后由 瑶池 于 2016-10-21 06:36 编辑

今天一波三折,承受了超出预料的压力和煎熬,我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志,最后还是决定继续放出我的更新教程。

以上!开始吧:


觉得有价值的话就转发吧,不辜负我整理的累……

欢迎大家加入 微信应用号QQ群 群号:321518204


同时,欢迎订阅我在敏捷大拇指Swifthumb.com)上的淘帖专辑《微信应用号小程序H5




相关内容

微信:这次我们邀请你来做一个“小程序”,就是应用号了

微信正式推出应用号“小程序”,你关心的问题都在这里

微信小程序设计规范抢先看!

第一弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

第二弹!手把手教你开发微信应用号第二弹

第三弹!手把手教你开发微信应用号第三弹

第四弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第五弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

番外篇!全球首个微信应用号开发教程!小程序DEMO视频奉上

手把手教你开发微信应用号第二弹 1

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 1





微信小程序项目结构以及配置

找到创建的 demo 文件夹,把项目导入到你的编辑器,这里使用的是 Sublime Text 编辑器。

手把手教你开发微信应用号第二弹 2

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 2


这个时候需要根据自己的项目需求结构进行更改了,项目根目录下面是首页渲染的几个 tabBar 页面,以及 app 的一些配置文件,如名片盒项目的 tabBar 是 3 个切换菜单:

手把手教你开发微信应用号第二弹 3

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 3


我们先找到 app.json 文件打开配置好这几个菜单,配置好 ”tabBar”,这个直接把配置文件改成你自己设计的即可。

手把手教你开发微信应用号第二弹 4

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 4


App.json 里面有几个配置项:

  • Pages:这个是编写的 js 文件,后缀 .js 这里不需要使用,配置好正确路径即可正常应用到(应用不到在重启微信开发者工具会直接报 page 错误)。
  • Window:配置顶部的一些样式,文档介绍比较详细。
  • tabBar:底部的几项配置,见名知意。
  • networkTimeout:暂时没发现用处,建议看文档。
  • 根据实际项目需求进行添加与更改。
  • iconPath 和 selectedIconPath:底部菜单按钮图片与得到切换点击高亮。
  • "text":可以去掉,全部去掉会发现底部 tabar 高度会减少很多。


手把手教你开发微信应用号第二弹 5

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 5


JSON 文件配置好后,根据项目进行文件创建,

Demo:存放的是假数据,这一期的开发工具支持 require,假数据使用的是 .js 文件形式,

里面的数据结构 json 一致,把 data 暴露出去即可。

手把手教你开发微信应用号第二弹 6

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 6


手把手教你开发微信应用号第二弹 7

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 7


然后取数据 require 进来即可,这一点使用很方便;

Images:图片路径;

Page:除 tabar 以外的页面;

Servise:服务交付层(与后台联调真实数据时使用);

Wxss:一些公共的 css 文件。

看到这里大家发现每个页面都被连带好三个不同的后缀。分别页面,css,js 目前只能依照这样,是微信应用号的一个规范吧。

手把手教你开发微信应用号第二弹 8

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 8


Wxss 文件是引入你写的样式文件,也可以直接在里面写样式。

手把手教你开发微信应用号第二弹 9

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 9


JS 文件需全部配置到 pages 里面才能生效。

手把手教你开发微信应用号第二弹 10

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 10





2、微信小程序首页面开发

进行了各种准备与配置后,来到首页开发。首先需要实现首页效果图如下:

手把手教你开发微信应用号第二弹 11

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 11


手把手教你开发微信应用号第二弹 12

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 12


Template 名片很多,需要用模板。

这里需要微信提供的基础组件大致是 input(搜索框)、action-sheet(右边是个底部下拉菜单,需要下拉菜单)、Scroll-view (右边 ABC 跳转)、(这个目前实现还有点问题,正在攻克中)。

手把手教你开发微信应用号第二弹 13

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 13


手把手教你开发微信应用号第二弹 14

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 14


View 是块元素,整个搜索框的一个样式。

手把手教你开发微信应用号第二弹 15

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 15


  • 名片夹:由于该项目主打名片功能,故很多地方使用,所以需要把名片以 template 分离出来。
  • Template:定义一个模板,name 模板的名字其实是个作用域。
  • Block:循环控制,名片很多,必须用循环出来,和很多操作数据的前端框架循环差不多。
  • 支持自定义属性 data,这里用作判断线上名片以及线下名片。


View 里面是一些数据引入,里面是支持三目运算符。

手把手教你开发微信应用号第二弹 16

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 16


引入 template 时非常方便,is 和 name 一样,data 是 nameData 传递过来的数据填充。

一切都绑定数据为中心点。

手把手教你开发微信应用号第二弹 17

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 17


取到数据具体操作根据你数据结构:

手把手教你开发微信应用号第二弹 18

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 18


这里的数据结构和 json 数据结构一样,

手把手教你开发微信应用号第二弹 19

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 19


这里如要传到页面的话即是

手把手教你开发微信应用号第二弹 20

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 20


因为页面遍历的是 nameData,timeData

手把手教你开发微信应用号第二弹 21

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 21


可以看下打印出来的数据结构,根据你的结构进行解析与传递。

手把手教你开发微信应用号第二弹 22

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 22


也可以看下这里对数据的一些操作。(这里须根据定义的 json 数据格式来操作的)

手把手教你开发微信应用号第二弹 23

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 23


名片的样式由于很多页面需要使用放在 common.css 里面,这个 common.css 是所有页面都需要用到,一些初始化设置。它是在 pp.wxss 里面引用之后才能被映射到全局 APP。

手把手教你开发微信应用号第二弹 24

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 24


手把手教你开发微信应用号第二弹 25

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 25


搜索框:其中 bindChange 为输入框发生改变事件。微信提供的 bindchange 在支持方面还有小问题,目前是失去焦点才能触发到此事件的发生,待后续完善吧,先实现功能再说。

手把手教你开发微信应用号第二弹 26

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 26


手把手教你开发微信应用号第二弹 27

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 27


菜单栏:做到菜单栏,使用微信提供的下拉菜单组件 action-sheet,它被触发的条件在这里。

手把手教你开发微信应用号第二弹 28

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 28


一切以绑定事件为起点:

手把手教你开发微信应用号第二弹 29

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 29


还是得先布好局才能被调动。

手把手教你开发微信应用号第二弹 30

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 30


Js 配置:

手把手教你开发微信应用号第二弹 31

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 31


Data 初始化数据:

手把手教你开发微信应用号第二弹 32

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 32


这里得取非,直接设置 false 调不出来: 调用事件。

手把手教你开发微信应用号第二弹 33

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 33


调出来还得去掉它啊:如下相同即可

手把手教你开发微信应用号第二弹 34

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 34


取消直接上事件即可。(分为菜单栏外部与底部)

手把手教你开发微信应用号第二弹 35

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 35


手把手教你开发微信应用号第二弹 36

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 36


好了,就是这么简单。实现效果简单,体验效果确实非常不错。

手把手教你开发微信应用号第二弹 37

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 37


还需要个 loading 效果(暂时没做动画,后期再考虑。)

Loading 布局

手把手教你开发微信应用号第二弹 38

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 38


首页的最外层 view

手把手教你开发微信应用号第二弹 39

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 39


根据微信的生命周期

手把手教你开发微信应用号第二弹 40

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 40


加载条完成。

手把手教你开发微信应用号第二弹 41

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 41


扫一扫,直接调用拍照功能,从这里看到微信提供的拍照 api 使用起来非常快速,只需根据需求配置即可。

手把手教你开发微信应用号第二弹 42

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 42


点击扫一扫之后,在开发者工具即可看到如下效果。

手把手教你开发微信应用号第二弹 43

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 43


做到这里说明下,dom 长度有限制,页面的结构太长,也是无法渲染的,暂且把公司排序暂时先去掉了。

手把手教你开发微信应用号第二弹 44

手把手教你开发微信应用号第二弹 - 敏捷大拇指 - 手把手教你开发微信应用号第二弹 44


左边的 ABC 跳转(还在继续完善中)。

这里还有个左滑删除名片功能,微信没有提供这个在移动端很实用的功能真的比较遗憾,后面得花点时间自己写下(后续完善)。

好了,今天更新的内容就先到这里。
游客,如果您要查看本帖隐藏内容请回复

小提示:

http://wxopen.notedown.cn/

这里面复刻了微信小程序的 api

下一弹:第三弹!手把手教你开发微信应用号第三弹




觉得有价值的话就转发吧,不辜负小女子我整理的累……

欢迎大家加入 微信应用号QQ群 群号:321518204


同时,欢迎订阅我在敏捷大拇指Swifthumb.com)上的淘帖专辑《微信应用号小程序H5



相关内容

微信:这次我们邀请你来做一个“小程序”,就是应用号了

微信正式推出应用号“小程序”,你关心的问题都在这里

微信小程序设计规范抢先看!

第一弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

第二弹!手把手教你开发微信应用号第二弹

第三弹!手把手教你开发微信应用号第三弹

第四弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第五弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

番外篇!全球首个微信应用号开发教程!小程序DEMO视频奉上

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

本帖被以下淘专辑推荐:

买定离手 发表于 2016-9-24 23:51:16 | 显示全部楼层
大周末的还来更,赞!
young 发表于 2016-9-25 00:59:01 | 显示全部楼层
赞美女!
jswift 发表于 2016-9-25 01:50:09 | 显示全部楼层
爱死你了!美女!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表