您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 营销创新 > 全球首个微信小程序应用号开发教程2(DOC23页)
小提示:这里面复刻了微信小程序的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;idata.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化的工具,相比我们公司在做的媒体性服务号,更有工具化改造价值:里面包括调用扫描、检索、分享、积分等复杂功能。感兴趣的朋友可以对照现在的服务号和开发教程印证。咨询更多微信小程序学习班信息,请点击以下微信公号文章链接了解(或扫以下二维码详细了解):=MjM5ODgwNjE2Mw==&mid=2247483668&idx=1&sn=91187cf49bef9d5b29adb4a9cb4c1cd9&chksm=a6c456e891b3dffe9cef42f514bfc3c57aedd9df48da38937871e0c1ec1769076b53bf6bdf19&mpshare=1&scene=1&srcid=1017Zawfhl4wUrDI3ebDCp01#rd可扫以下公众号二维码详细了解:
本文标题:全球首个微信小程序应用号开发教程2(DOC23页)
链接地址:https://www.777doc.com/doc-1576424 .html