全球首个微信小程序应用号开发教程2VIP免费

小提示：http://wxopen.notedown.cn/这里面复刻了微信小程序的api第三章：微信小程序项目结构以及配置找到创建的demo文件夹，把项目导入到你的编辑器，这里使用的是SublimeText编辑器。这个时候需要根据自己的项目需求结构进行更改了，项目根目录下面是首页渲染的几个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){//发生搜索事情varself=this;//this绑定，这个this指向微信的提供windowvarText=e.detail.value.toUpperCase();//取到输入的内容if(Text==""){//如果输入为空一些东西需要显示否则不显示show_letter="block";}else{show_letter="none";}this.setData({show_letter:show_letter,showSheet:true});varres=nameData;获取到传递的数据if(data_type=="name"){}elseif(data_type=="time"){res=timeData;};for(varkinres){//for-in循环取到data里面的cardsvardata=res[k].cards;for(vari=0;i