文档章节

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

博卡君
 博卡君
发布于 2016/09/23 09:33
字数 2065
阅读 15267
收藏 162
点赞 14
评论 20

今天一波三折,承受了超出预料的压力和煎熬,最后还是决定继续放出我的更新教程。我想我一没有泄露公司的代码,二没有提供泄露开发工具下载,只是从程序猿角度写了篇开发日志。我已经做好了最坏的准备,就算放弃这份工作,也会把完成的教程交给「名片盒」的团队继续更新发布下去!做了就绝不后悔!只是博卡君水平有限,文章还请各位多包容。

以上!开始吧:

小提示:

http://wxopen.notedown.cn/

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

第三章:微信小程序项目结构以及配置

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

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

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

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

  • Pages:这个是编写的 js 文件,后缀 .js 这里不需要使用,配置好正确路径即可正常应用到(应用不到在重启微信开发者工具会直接报 page 错误)。

  • Window:配置顶部的一些样式,文档介绍比较详细。

  • tabBar:底部的几项配置,见名知意。

  • networkTimeout:暂时没发现用处,建议看文档。

  • 根据实际项目需求进行添加与更改。

  • iconPath 和 selectedIconPath:底部菜单按钮图片与得到切换点击高亮。

  • "text":可以去掉,全部去掉会发现底部 tabar 高度会减少很多。

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

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

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

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

Images:图片路径;

Page:除 tabar 以外的页面;

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

Wxss:一些公共的 css 文件。

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

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

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

下一章:微信小程序首页面开发。

第四章:微信小程序首页面开发

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

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

这里需要微信提供的基础组件大致是 input(搜索框)、

action-sheet(右边是个底部下拉菜单,需要下拉菜单)、

Scroll-view (右边 ABC 跳转)、(这个目前实现还有点问题,正在攻克中)。

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

  • 名片夹:由于该项目主打名片功能,故很多地方使用,所以需要把名片以 template 分离出来。

  • Template:定义一个模板,name 模板的名字其实是个作用域。

  • Block:循环控制,名片很多,必须用循环出来,和很多操作数据的前端框架循环差不多。

  • 支持自定义属性 data,这里用作判断线上名片以及线下名片。

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

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

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

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

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

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

this.setData({

nameData:card_list_name.data.cards,

timeData:card_list_time.data.cards

});

因为页面遍历的是 nameData,timeData

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

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

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

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

bindInputChange:function(e){

//发生搜索事情

var self = this; //this绑定,这个this指向微信的提供window

var Text = e.detail.value.toUpperCase();//取到输入的内容

if(Text==""){   //如果输入为空一些东西需要显示否则不显示

show_letter ="block";

}else{

        show_letter= "none";

}

this.setData({

        show_letter:show_letter,

        showSheet:true

});

var res = nameData;   获取到传递的数据

if(data_type=="name"){

}else if(data_type=="time"){

        res= timeData;

};

for(var k in res){  //for-in循环取到data里面的cards

var data =res[k].cards;

for(var i =0;i<data.length;i++){  //循环取到需要搜索的关键字对比

If(data[i].userName!=null&& data[i].userName.indexOf(Text)!=-1){

data[i]["display"]= "block";  //存在就是赋值显示

}else{

data[i]["display"]= "none"; // 不存在赋值不显示

}

}

}

}

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

一切以绑定事件为起点:

bindButtonTapSheet:function(e){

//调取底部下拉菜单栏

}

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

Js 配置:

Data 初始化数据:

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

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

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

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

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

Loading 布局

首页的最外层 view

根据微信的生命周期

Onload:function(e){

this.setData({

toastDisplay:”block”,

htmlWrapDisplay:”none”

})

},

onShow:function(e){

this.setData({

toastDisplay:”none”,

htmlWrapDisplay:”block”

})

}

加载条完成。

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

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

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

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

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

好了,今天更新的内容就先到这里。后续的内容「名片盒」的服务号会按照约定帮我每日更新发布出来。大家每天可以进到这个服务号输入「应用号」、「小程序」或者「教程」,能获取教程更新列表。

感谢「名片盒」团队的信任和全力支持。

博卡君之所以选择这个服务号动手术,是因为从服务号角度它更像一个 APP 化的工具,相比我们公司在做的媒体性服务号,更有工具化改造价值:里面包括调用扫描、检索、分享、积分等复杂功能。感兴趣的朋友可以对照现在的服务号和开发教程印证。

好了,不罗嗦了。教程会在「名片盒」和开源中国保持更新,QQ 群就当做大家相互交流学习的平台吧,有兴趣的朋友也可以来。

QQ 群号:

371736433(二群)

383863133(三群

© 著作权归作者所有

共有 人打赏支持
博卡君
粉丝 804
博文 16
码字总数 24235
作品 0
深圳
程序员
加载中

评论(20)

coder_12小兵
coder_12小兵
楼主问下,微信小程序之间可以互相跳转吗?
博卡君
博卡君

引用来自“developer1999”的评论

必须一直关注,希望楼主能做出一个小产品来

回复@developer1999 : 感谢,会的
developer1999
developer1999
必须一直关注,希望楼主能做出一个小产品来
SnowFlake
SnowFlake
搜索按钮可以用 <icon type="search" class="search" size="20"/> 更省事些,不用图片。
ios122
ios122

引用来自“南漂一卒”的评论

引用来自“ios122”的评论

我是来混脸熟的,顺便吐槽下:
1. 代码中 有 var,而不是let ,说明小程序不支持 es5 +?还是LZ 个人习惯?
2.提到了模板,用过JSX的都明白, 模板语言分分钟被JSX秒杀, 小程序的架构设计,这么LOW?
3.其实微信,如果真的有心开放流量,把一个阉割版的 react-native 集成进去,就ok,搞这么麻烦,要闹哪样?

let 的优势在非函数的块级作用域,其它地方为何非要用?JSX 这么恶心的混编语法 好意思出来拽?

回复@南漂一卒 : ..我就刷下 存在感... 至于JSX 和模板语言,谁优谁劣,交给时间吧 自己用着舒服就行;
南漂一卒
南漂一卒
楼主是不是在上班搞这些?一般老板会认为你“利用公司资源 做利于别人但公司用不上的东西”,所以“产权要归公司”,你也不能“私自发布”~
南漂一卒
南漂一卒

引用来自“ios122”的评论

我是来混脸熟的,顺便吐槽下:
1. 代码中 有 var,而不是let ,说明小程序不支持 es5 +?还是LZ 个人习惯?
2.提到了模板,用过JSX的都明白, 模板语言分分钟被JSX秒杀, 小程序的架构设计,这么LOW?
3.其实微信,如果真的有心开放流量,把一个阉割版的 react-native 集成进去,就ok,搞这么麻烦,要闹哪样?

楼主是不是在上班搞这些?一般老板会认为你“利用公司资源 做利于别人但公司用不上的东西”,所以“产权要归公司”,你也不能“私自发布”~
南漂一卒
南漂一卒

引用来自“ios122”的评论

我是来混脸熟的,顺便吐槽下:
1. 代码中 有 var,而不是let ,说明小程序不支持 es5 +?还是LZ 个人习惯?
2.提到了模板,用过JSX的都明白, 模板语言分分钟被JSX秒杀, 小程序的架构设计,这么LOW?
3.其实微信,如果真的有心开放流量,把一个阉割版的 react-native 集成进去,就ok,搞这么麻烦,要闹哪样?

let 的优势在非函数的块级作用域,其它地方为何非要用?JSX 这么恶心的混编语法 好意思出来拽?
ios122
ios122
我是来混脸熟的,顺便吐槽下:
1. 代码中 有 var,而不是let ,说明小程序不支持 es5 +?还是LZ 个人习惯?
2.提到了模板,用过JSX的都明白, 模板语言分分钟被JSX秒杀, 小程序的架构设计,这么LOW?
3.其实微信,如果真的有心开放流量,把一个阉割版的 react-native 集成进去,就ok,搞这么麻烦,要闹哪样?
iehyou
iehyou

引用来自“Raymin”的评论

作死的节奏啊?忘了 Jobs 怎么封杀 Flash 的?
既然这么有胆,微信不如集成一个 Flash 得了,大把小程序可以立马上线。
看另外的消息 不能做游戏
从零开始学做微信小程序,看这些就够了!

随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序...

王练 ⋅ 2016/11/09 ⋅ 22

微信小程序(应用号)资源汇总整理(转)

微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribb...

老朱教授 ⋅ 2017/10/09 ⋅ 0

小程序 大假期,技术猿国庆假期的正确打开方式…

明天(10月1日)就是国庆黄金7天假了。作为技术猿,除了美美的睡一觉好像也没啥别的事了。与其窝在家里玩手机刷朋友圈,不如做个小程序玩玩。 微信小程序开发正当时,没有内测资格不要紧。这...

凝小紫 ⋅ 2016/09/30 ⋅ 11

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

感谢朋友们的支持!这两天博卡君收到了很多支持和安慰,也认识了很多志同道合的朋友。目前微信公布的工具和代码都不是正式版,随时有可能调整,大家先体验和学习为主吧。最近这个教程搞得我也...

博卡君 ⋅ 2016/09/23 ⋅ 19

微信小程序开发资源 Awesome 大搜集

https://laravel-china.org/topics/2892 GitHub 访问不稳定,在这里做个加速。 GitHub 地址:https://github.com/Aufree/awesome-wechat-weapp 目录 开源项目 文档 教程 知乎讨论 媒体报道 ...

WolfX ⋅ 2016/09/23 ⋅ 0

微信小程序学习资源

微信小程序开发资源汇总 QQ交流群 目录 官方文档 新闻报道 社区 工具 插件 分析 讨论 教程 视频教程 文章 代码 轮子 置顶 WePY:组件化的小程序开发框架 :100: WePY 开发资源汇总 :100: ZanU...

技术金三胖 ⋅ 01/01 ⋅ 0

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

大家好!博卡君原计划是能在国庆假期前把小程序的开发教程做完,给大家一套完整、系统的东西,不过由于最近小程序开发工具的拍照组件尚未完善,很多功能还不能顺利实现。我考虑了一下,觉得不...

博卡君 ⋅ 2016/09/30 ⋅ 9

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

首先尊重原创 https://my.oschina.net/wwnick/blog/750055 微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关心应用号的...

Simon_ITer ⋅ 2016/09/22 ⋅ 0

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

微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「...

博卡君 ⋅ 2016/09/22 ⋅ 86

【福利】微信小程序精选Demo合集

小编最近在开发小程序,也读到了不少优秀的小程序源码,项目中有些需求可以直接从源码里粘贴复制过来,虽然这样做不利于自己独立编写代码,但比较是给公司做项目啊,秉着效率第一的原则,简直...

祈澈姑娘 ⋅ 03/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部