玩转微信应用号,「小程序」开发实操指南第二弹

摘要: 怎样将一个「服务号」改造成为「小程序」?全球首个微信应用号开发教程第二弹。

微信应用号(小程序,「应用号」的新称呼)终于来了!

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

我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧。(公司的项目保密还不能分享代码和截图。博卡君是边加班边偷偷给大家写教程。感谢「名片盒」团队提供他们的服务号来动这个手术,所以博卡君的教程就用「名片盒」的公众号滚动更新发布吧?)链接:操作指南第一弹

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

找到创建的 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 是所有页面都需要用到,一些初始化设置。它是在 app.wxss 里面引用之后才能被映射到全局 APP。

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

在 index.js 里面写事件

```
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;iIf(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 跳转(还在继续完善中)。
这里还有个左滑删除名片功能,微信没有提供这个在移动端很实用的功能真的比较遗憾,后面得花点时间自己写下(后续完善)。

好了,今天更新的内容就先到这里。

更多商业新知,关注钛媒体微信号:钛媒体(ID:taimeiti)

qrcode_for_gh_99d4be81cba2_1280

钛媒体微信二维码

 

本文系作者 博卡君 授权钛媒体发表,并经钛媒体编辑,转载请注明出处、作者和本文链接
分享到:

第一时间获取TMT行业新鲜资讯和深度商业分析,请在微信公众账号中搜索「钛媒体」或者「taimeiti」,或用手机扫描左方二维码,即可获得钛媒体每日精华内容推送和最优搜索体验,并参与编辑活动。

博卡君
博卡君

评论(10

  • qaegtsdf qaegtsdf 2016-09-28 15:17 via pc

    股票投资不仅仅是在网上看看新闻就可以的。想在股市站稳脚跟,必须学会付出。因为世界万物都是遵循守恒定律的。联系我们需要你付出勇气,但是你得到的将会是一次或者长久的赚钱机遇。每.日.布..局.提.前.通.知.,.盈..利.之.后.再.收..费.。.可.能..你.会..认..为是在冒险,富贵险中求。不入虎穴焉得虎子?所以!请珍惜,这一个可以让自己钱包鼓起来的机会吧!联系2719953829

    0
    0
    回复
  • qaegtsdf qaegtsdf 2016-09-28 15:11 via pc

    是股民朋友加[ 2719953829]希望在当今股市里能真正帮到你选择! 每日布局一支短线强势股!专业人做专业事,短线快进快出,获利在前,付费在后。付不付,你来定。但是我相信你看到我们的实力不会不付的,因为我们来市场的目的是一致的:共同赚钱!今天的投资,明天的回报,及时加入[ 2719953829]提供每日必涨股!

    0
    0
    回复
  • 滴答滴 滴答滴 2016-09-26 11:04 via pc

    股票投资不仅仅是在网上看看新闻就可以的。想在股市站稳脚跟,必须学会付出。因为世界万物都是遵循守恒定律的。联系我们需要你付出勇气,但是你得到的将会是一次或者长久的赚钱机遇。每.日.布..局.提.前.通.知.,.盈..利.之.后.再.收..费.。.可.能..你.会..认..为是在冒险,富贵险中求。不入虎穴焉得虎子?所以!请珍惜,这一个可以让自己钱包鼓起来的机会吧!联系2719953829

    0
    0
    回复
  • 滴答滴 滴答滴 2016-09-26 11:03 via pc

    去 弱 夺 强,对 于 那 些 死 拿 套 牢 的 弱 势 股 将 会 使 你 远 远 落 后 - -新 时 代 !思 维 的 改 变 速 度 决 定了 你 市 场 赚 钱 的 速 度 ! 想 跟 的 能 跟 的 一 定 跟 上合 作 ,过 时 不 候, 这 样 的 连 板 票 不 是 天 天 有 ,机 会 出 现 要 勇 于 亮 剑,股 市 相 逢,勇 者 胜 ,等 大 涨 再 后 悔 , 为 时 已 晚 !加 抠 2719953829

    0
    0
    回复
  • Alver Alver 回复刘哲 2016-09-26 09:53 via pc

    你可以直接搜bokajun加他公众号,或者加他开的一个微信技术讨论群:371736433,不过好像他都很少说话...

    0
    0
    查看对话
    回复
  • 雪藏 雪藏 回复钛pGP8sH 2016-09-26 09:52 via pc

    在腾讯平台上开发的应用应该都有数据保护和隐私权限,如果腾讯连这类信息都要查看的话,以后谁还敢在他们平台上做应用啊

    0
    0
    查看对话
    回复
  • Darren13 Darren13 2016-09-25 04:04 via iphone

    好东西

    0
    0
    回复
  • 钛pGP8sH 钛pGP8sH 2016-09-24 12:07 via pc

    腾讯比我自己都清楚我收到了哪些名片,这真的好吗?

    0
    0
    回复
  • 笨之鸟-铭寒 笨之鸟-铭寒 2016-09-24 10:01 via android

    比较无聊

    0
    0
    回复
  • 刘哲 刘哲 2016-09-24 08:19 via pc

    想问一下,博卡君有微信或者公众号吗?

    0
    0
    回复

Oh! no

您是否确认要删除该条评论吗?

分享到微信朋友圈