微信小程序制作
  • 微信小程序开发公司踩过的坑你可别再踩了

    微信小程序开发公司踩过的坑你可...2018-12-17

    微信小程序开发公司踩过的坑你可别再踩了,凡是从事软件开发工作的技术或者公司多多少少都踩过一些坑,都都在不了解整体开发的形势下做出的一种无知举措,在现如今,微信小程序的开发进入了火热阶段,好多公司和技术都投身于微信开发方面来了,面对客户的一些外包需求,肯定有些在不之情的情况下,很有可能做出错误的决定的,汤坑在小编看来是无法避免的,所以说,小程序开发外包公司在跟客户签订合同之前,一定要做好前期的准备工作对一些不了解的,不清楚的接口先在网络上查询好之后在做决定,不要盲目的签合同,负责很容易跳坑的。

    小程序提供了一个框架,微信称之为mina,这个框架主要分两个层面,视图层和逻辑层。框架的核心是一个响应的数据绑定系统。WXML 中的动态数据均来自对应 Page 的 data,这个数据绑定是单向的,只有数据发生变化,视图才会做出相应的调整。这种模式,让开发者专注于事件处理上,改变对象状态,实现视图更新。 
    为了方便以及限制开发者开发,微信自己定义了一系列的基础组件,就是视图层的组成单元(表单组件,媒体组件,导航等),组件自带一些功能与微信风格的样式,类似html标签。微信还提供了很多原生的微信api,用来调用微信内部提供的功能,以及一个微信小程序开发者工具。

    微信小程序源码结构
    视图层(将逻辑层的数据展现在视图上)
    逻辑层(通过改变数据[setData方法]来改变视图)

    配置文件

    在小程序中,微信规定了界面的组成模式,由四个文件组成。
    .wxml文件(页面结构文件)标签语言,类似html,真正负责页面结构的文件,可以绑定数据。
    .wxss文件(样式表文件)类似css,大部分css样式都相同
    .js文件(脚本文件)用来运行我们的逻辑,使用js语言
    .json文件(配置文件)主要配置公用的样式,比如tab栏,窗口样式等
    知识库微信小程序的例子
    CSDN小程序开发初步尝试,关注的重点是js文件和wxml文件。
    知识库把开发领域细分成某个领域,例如技术语言,运维系统,行业应用等方面,对每个技术和知识点都设计一个网状图谱,来总结技术某一方面涉及到的知识,同时为知识结构准备一些精品的内容。方便大家更系统的学习知识。
    在知识库这个产品上,需要实现内容推荐,个人中心以及搜索。用户侧和内容推荐测,都包括四层:库-》知识结构-》内容列表-》内容详情页。搜索功能可以根据用户搜索的关键词找到用户侧或者推荐里的相关内容。方便用户阅读和收藏。

    知识库页面设计
    小程序组件满足了所有的显示功能和结构(列表,窗口,按钮,事件) 
    API齐全,便于逻辑开发。不同的功能模块放在不同的页面里。 
    - 视图层: tab栏,列表页,知识结构页,内容详情页,搜索页 
    - 逻辑层: 
    tab栏->通过绑定数据index选择一级页面 
    列表页->通过改变绑定数据contentlist数组,控制列表显示和动态加载 
    搜索页->通过绑定数据searchValue,通过事件及时获取用户输入

    小程序开发路上踩过的坑
    打开页面数量限制(redirectTo还是navigateTo)
    微信提供tab栏的设置,可以在app.json中配置,在app里配置的tab栏将出现在所有的一级页面。但是他有一个问题就是第一次点击tab将会打开一个新的页面,微信对打开页面的数量限制是五个。
    微信提供了几个页面跳转的方式,redirectto,navigateto,还有返回。重点说这两个,redirectto会直接在原页面上打开新页面,navigateto会新开启一个页面。由于微信在页面数量上有限制,我们产品的层级有比较多,导致我们无法直接在app.json设置tab栏。所以我们把tab栏单独设计出来。点击tab不开启新页面。在每个初级页面都引用进去,之后二级三级的页面上不使用tab切换,而是需要返回到初级页面。
    树状结构的展示
    每一个库都有一个树状的知识结构,大家请看这个例子。每个层级展示的方式是一样的,所以正常情况下,我们都会选用递归的方式来使展示。比如在这张图里,当我们判断这个节点拥有子节点,就想再次调用同样方法显示。但是很遗憾,小程序里,不论是使用模板,还是使用include的方式引用文件,都没有办法做到自己调自己。
    幸运的是我们知道我们层级最深有多少,这样我就可以写几个同样的文件和模板,加上不同的命名,来调用。如果是未知层级的树状结构,就会非常难以处理。在这里可以建议大家将树状结构变成数组的形式,加上层级标识,在wxml文件中可以使用循环的方式来处理层级的显示。 
    Html页面在微信小程序中展示
    这是一个非常难处理的问题,微信不支持html页面的展示,所以需要把所有html的标签转化成小程序内允许的标签。我们使用了一个名叫wxParse的应用,这个应用的功能就是通过正则表达式将html页面转化成json形式,再用模板的方式展现出来。在这里面规定了各个标签的样式(wxss)。遗憾的是他也有层级方面的问题,同样是重复写了很多完全一样的模板。
    顺序调用。如果html的标签层级结构超出了模板个数,那么超出部分将无法显示出来。这个应用是在微信中运行的,建议大家把数据转化放在服务器端来进行,将转换后的数据发给小程序。另外小程序setData()一次不能超过1024k,如果你的json格式数据超过这个限制,就会很难再拼接。
    冒泡事件
    一个组件上的事件被触发后,该事件会向父节点传递,网络请求接口 wx.request() 没有携带 Cookies,如果服务器端有通过获取cookies处理的逻辑没办法和小程序结合,只能为小程序单独开发新的接口。
    小程序在运营上的优势在于微信用户量大,适合推广,某些功能单一的APP可以在小程序中实现,不用再下载APP。开发者不用考虑平台,开发成本低。但同时不适合开发逻辑复杂界面丰富的程序,受到框架限制,随意性小,无法满足所有功能。

  • 小程序开发公司目前从在的难题有那些呢?

    小程序开发公司目前从在的难题有...2018-12-17

    小程序开发公司目前从在的难题有那些呢?只要是做软件开发外包的服务公司目前都从在这些方面的的问题,最为核心和关键的就是业务问题跟技术的问题,这也是做为软件外包公司面临生存和发展的自大问题了,主要原因是这个行业竞争太大,好多的业务没有一个稳定的心态去长期在这个行业从事和发展下去,另外就是技术人员的心态了,作为技术性的外包公司,不仅仅是要专业的技术骨干人才,而且还需要能够从事开发,挑大梁的技术大牛,但是好多软件技术外包公司面临一个问题是,不怕花钱请技术大牛,也不怕培养技术人才,唯一害怕的是培养出来的技术人员没过过久,技术成长起来就立马跳槽寻找其他的公司涨工资,现在好多的外包公司成为这技术人才成长和联系的地方了,所以作为一家专业的技术外公司,不仅仅面临的是这些问题,还有更多的问题,接下来我们来详细的看看。

    一、需求确定问题
    小程序是可以作为服务号的辅助没错,有的品牌甚至依靠小程序提升了不少业务量。但如果盲目选择开发了一个用户不需要、使用量不够高的小程序,投入使用后,前期付出的人力物力得不到相应的回报,那就得不偿失了
    所以开发小程序时遇到的第一个难题,就是要确定需求:企业需不需要小程序、需要什么类型的小程序。
    小程序更适合线上线下需要紧密结合的品牌,更适合那些高频次、用完即走、功能需求不是非常复杂的品牌方,比如摩拜单车、麦当劳、肯德基、今日头条等。所以开发小程序时对小程序的定位、要求都要考虑清楚。
    二、产品原生问题
    小程序发布至今才半年多,虽然因为开发程序少,门槛低得到一众好评,但毕竟是初生牛犊,仍然具有或多或少的原生问题。
    接口:小程序目前已经开放近 50 个入口,但其步不支持朋友圈分享仍然是不少开发者与品牌方的心病。
    安全:目前不少金融类小程序因为存在支付安全隐患已经被叫停,目前小程序最火摩拜、麦当劳、星巴克等都属于快消类,既然涉及到消费,在用户资金安全这一块则需要强大的安全系统作支持。
    速度:作为app瘦身版的小程序,若打开速度过慢,那就非常影响用户体验。
    兼容性:目前通过开发工具开发的小程序并没有与手机做到所建即所得,简单讲就是开发的小程序在 IOS 和安卓上的会出现显示不同的情况。
    提供的组件不完善:例如 WebView、ImageView 都不可用,通常 HTML5、IOS、安卓可以直接使用 WebView,但小程序需要通过开发者利用小程序提供的组件自行封装方可使用。
    对第三方插件不友好:小程序的脚本语言仅支持原生 JavaScript,很多优秀的第三方框架暂时还不能使用。
    ——部分内容引用自课课家教育
    这些原生问题是所有小程序都在面临的难题,但小程序的进化速度会让这些问题逐渐消失,我们可以继续保持关注
    三、开发团队问题
    一般来说,一个标准的微信小程序开发团队人员构成如下:
    产品经理:规划整个开发流程,安排各人员工作保证项目的正常开发。
    UI 设计师:设计产品界面,对产品 UI 最终效果负责。
    前端工程师:在UI设计出界面图,将其以代码的形式实现。
    后端工程师后端框架的搭建,和前端一前一后一起将产品的整个框架搭建出来。
    测试人员:负责产品的全面测试,找出系统不合理的地方以及 bug 。
    对于小企业来说,如果没有现有的开发团队,第一反应就是找外包。可是外包团队服务质量参差不齐,在有功能需要调整时也非常麻烦和不方便,还不如能自己做。成本最低 0 元起,即便是收费的版本,也不到一个资深设计师半个月的工资。
    四、开发成本问题
    客观来说,小程序的开发成本包含时间成本与人力成本两大部分。
    时间成本:
    正常来说一个小程序项目开始开发到最后上线所需时间是 20 天,这个时间受团队成员技术水平的影响,如果是经验不足的团队那么这个开发周期也会大大拉长,如果是刚刚组建的团队那么前期磨合也需要一定的时间,这也会大大影响到项目的开发进度。
    人力成本:
    先来做道数学题:按照每日人力成本与工作日进行乘和计算
    产品经理 600 元/人/工作日* 2 个工作日 +
    UI 设计师 600 元/人/工作日* 3 个工作日 +
    工程师 800 元/人/工作日* 3 个工作日 +
    后端开发工程师 800 元/人/工作日* 10 个工作日 +
    测试工程师 500 元/人/工作日* 2 个工作日=
    1200+1800+2400+8000+1000=14400 元
    以上为一个公司开发一个完善的微信小程序产品( 10 页左右)大概所需要的最低投入成本。
    小程序的费用至少是 APP 的 1/10,也正因为如此,引来如此多的开发者和企业的高度关注和参与。
    成本下降的原因有 3 个:小程序的开发时间是 APP 的 1/6 左右;小程序的框架是有明确限制的,不能超过 1MB ,内存限制预示着功能的减少;微信还对小程序有其它的限制:比如不能进行个性化定制,不能开发会员体系。这些都降低了小程序的开发成本。
    不难看出,对于普通中小企业来说,要自己组建一支小程序开发团队无论从时间成本还是人力成本来看,都是一桩不太划算的投入。随着品牌方对于小程序开发的需求量的与日俱增,市场上涌现出一大批优秀的开发团队或者企业,上线了就是其中优秀的代表。
    五、小程序推广问题
    小程序上线后,要面临的第一个问题就是推广。小程序中推广上的主要有四个难点: 无粉丝、无文章推送、无小程序商店、无朋友圈分享功能。它没有自我展示与推广的平台,也无法通过朋友圈分享传播。
    所以品牌方若想推广自己的小程序,则需要借助广撒小程序码,服务号引导、文章推送广告来实现了。
    六、数据监测问题
    由于没有粉丝,无法转发朋友圈等限制,使得小程序的数据监测看上去有些难。还好,目前微信官方提供了基础统计功能“小程序数据助手”,可以实时监测到小程序的各项指标数据,方便运营与开发人员作出相应的调整与提升。
    综上所述,虽然小程序目前存在一些问题,但它正是开启互联网下一个时代的起点,而且它正在迅速完善自己。在大众对于体验越来越注重的今天,如何用好小程序,是每一个品牌都需要认真看待的课题。

  • 微信小程序的运行流程详解

    微信小程序的运行流程详解...2018-12-17

    微信小程序的运行流程详解,作为专业的技术人员,今天就跟大家探讨一下微信小程序是如何在计算段运行的,运行的顺序是一个什么样的流程呢,不过这些是专业的技术人员专注的东西,作为一名专业的微信小程序开发人员,就根本大家探讨一下这方面的专业知识。我们这里来追溯一下小程序架构层的执行逻辑,从APP到一个view实例化是怎么做的,这里首先明确几个点:① 微信小程序事实上依旧是提供的webview执行环境,所以我们依旧可以在js环境中访问window、location等属性② 微信小程序提供的展示的全部是Native定制化的UI,所以不要去想DOM操作的事这里各位可以想象为,小程序界面中有一块webview在执行真正的代码逻辑,只不过这个webview除了装载js程序什么都没做,而所有的页面渲染全部是js通过URL Schema或者JSCore进行的Native通信,叫Native根据设置的规则完成的页面渲染。我们这里一起瞎子摸象一般对微信小程序架构做了简单的摸索,这里发现事实上小程序流程与自己所想有一些出入,这里初步认为流程是这样的:① 我们写好小程序代码后,提交代码② 在发布流程中我们的代码经过构建流程,app.json以及入口的index.html(伪造页面),重新组装为一个只有js代码的空页面③ 这里开始载入流程,用户点击一个微信按钮,进入小程序④ 微信容器开启Hybrid容器,webview载入入口页面(我感觉应该有个规则可以通过url去打开固定一个小程序页面,这里后续碰到开发案例再说)⑤ webview执行环境实例化App,其后自动装载默认Page(这里默认是index)。

  • 小程序开发的技术高手都是实践出来的

    小程序开发的技术高手都是实践出...2018-12-17

    小程序开发的技术高手都是实践出来的,自从小程序诞生后,出现了好多的追随者,都是从是微信小程序开发者的技术人员,另微信公众号出现之前也出现了好多的参与者,他们都是技术性的人才,目的就是学习和了解微信公众平台上的开发资料。凡是微信公众平台跟微信小程序开发高手都是利用很多的开发项目实战和练习出来的,没有任何人天生就是天才,都是通过每一个大大小小的项目研究,然后得出的一些开发方面的的技术心得罢了。接下来我们来看看我们公司的微信小程序开发技术是如何看待小程序开发工作的。

    微信是提供了开发工具的,就是这个,集合了编辑、调试、编译、发布等功能,一个正儿八经的IDE该有的东西,它都有。但是拆开来看,很多体验并不是最优的。尤其是编辑代码的时候,api提示不全,很多快捷键没有,不支持第三方插件,用起来,不说很痛苦,起码没那么爽。所以,我准备用其他IDE代替微信官方开发者工具的编辑器。作为一名半吊子前端选手,最熟悉的莫过于WebStorm了,没毛病,就它了。当然,编译、调试、发布还得用官方的,因为它和微信后台无缝衔接,不用不行。那么相当于我们有两个IDE,一个用来写代码,一个用来调代码和上传代码,有两个问题,一是麻烦,二是不兼容。

    2、脚本

    我们之前讲过,小程序定义了它自己的一套文件格式,js、wxml和wxss,所以官方开发者工具只认识这些亲儿子们。但是WebStrom作为老牌的IDE,并不知道什么wxml和wxss,这就是兼容行问题。解法很简单,用一个转换器,把xml和xss转换成wxml和wxss。这个转换器,就是一个脚本,它只干一件事——文件重命名。于是整个过程变成了,在WebStorm里编辑代码,然后敲一行命令做转换,最后到官方工具里编译看效果。程序员觉得好麻烦啊,写个脚本吧。这个脚本可以自动监听代码文件的改变,自动转换文件格式,自动发起代码编译,效果就是,这边刚写完代码,那边界面上就有了变化,牛逼就是这么简单。

    3、流程

    一般开发的时候,都要区分开发环境、灰度/体验环境和线上环境的,小程序也不例外。开发环境一般直接连接到本地服务器,所有资源都是本地的,支持随时修改随时看到结果。每个小程序都可以绑定10个到40个不等的体验者(取决于是否经过认证),你可以把自己的代码打包上传为体验包,发送给体验者,他们会连接到体验服务器,与正式服务器隔离。体验完毕之后,一般会有产品经理跳出来增加需求,这时候就要准备各种理由推掉,千万不能让步,否则迎接你的将是凌晨4点钟的太阳(顺便透漏一下,果果做的小程序,产品和开发是5:1,作为开发表示目前情绪稳定,请祖国人民放心)。最后是提交微信审核,趁他们审核的时候,你有两到三天的时间——做新需求。(别傻了孩子,你还想抽点时间打排位?倒是产品同学一个一个都上了王者)

    4、可以和不可以

    很多人问我,你们那个分享界面,直接发到朋友圈多好啊,那里才是大流量啊。——对不起,没有。产品同学问我,咱能不能时不时给用户推个push,搞个拉新拉活啊?——对不起,也没有。这没有那没有,有什么可以有的啊?恩,留存方面,小程序可以发送到桌面,可以置顶到会话,如果用户主动一点儿的话。分享方面,小程序可以直接分享到会话,会话内容会截取页面80%的区域做展示。哦,如果说小程序有什么超能力的话,就是可以拿到群信息,非常imba。现在有很多微信群协作工具,群排名,群PK,后面会有更多的群插件冒出来。

    5、最难的事情,运营

    怎么说呢,虽然背后就是微信这个超级大腿,但小程序的整体量级并没有起来,或者说并没有达到人们预期的那种程度。在这种情况下搞运营推广,就多了一个教育成本。比如我把识花君分享给我二姨,还要花半天时间教她怎么用。下次要用,还来问我,还找不到入口在哪。我相信普通用户也有这样的问题。

  • 小程序开发专业开发人员技术宝典

    小程序开发专业开发人员技术宝典...2018-12-17

    小程序开发框架的逻辑层是由JavaScript编写。 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。小程序再次基础上做了一些修改方便开发: 增加 APP 和 Page 方法,进行程序和页面的注册。APP( ) 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

    生命周期函数为:

    onLoad: 页面加载

      一个页面只会调用一次。

    onShow: 页面显示

      每次打开页面都会调用一次。

    onReady: 页面初次渲染完成

      一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互

    onHide: 页面隐藏

      当navigateTo或底部tab切换时调用

    onUnload: 页面卸载

      当redirectTo或navigateBack的时候调用

    小程序实例解析

      1、创建项目

      现在是内测版本,所有的AppID全部都是腾讯内部发布的。但是,没有AppID也不影响测试开发,我们可以选择无AppID进行测试开发,只是不能在手机真机上面调试。

      选择项目目录,再添加项目即可。

      2、 编写代码

      点击开发者工具左侧导航的「编辑」,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。是 app.js、app.json、app.wxss 这三个。其中app.js是我们传统的js文件,app.json是项目配置文件,app.wxss是项目css文件,微信小程序会读取这些文件,并生成小程序实例。

      (1)app.json:

      app.json 是对整个小程序的全局配置。其中有5个属性,官方给出的配置表为:
      我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口  背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

      window是用于设置小程序的状态栏、导航条、标题、窗口背景色
      pages里面是程序的所有页面的目录,所有需要跳转的页面,都需要在pages里面配置好。

      (2)tabBar:

      tabBar是底部导航栏部分,tabBar API为
      tabBar配置好后,在任何页面下,都会有一个tab导航栏,其中list里面是配置tab里有多少个按钮,案例中为两个。list里面有多个属性,
      案例APP的app.json为:

      {

      "pages":[

      "pages/index/index",

      "pages/logs/logs"

      ],

      "window":{

      "backgroundTextStyle":"light",

      "navigationBarBackgroundColor": "green",

      "navigationBarTitleText": "APP",

      "navigationBarTextStyle":"white"

      },

      "tabBar": {

      "selectedColor":"red",

      "list": [{

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath":"goods_mgold.png",

      "selectedIconPath":"goods_mgold.png"

      }, {

      "pagePath": "pages/logs/logs",

      "text": "天气查询",

      "iconPath":"icon_community.png",

      "selectedIconPath":"icon_community.png"

      }]

      }

      }

      上面那段配置代码展示出来的效果是:



      (3)wxml文件:

      微信的wxml文件相当于传统的html文件,省去了一些微信APP开发不需要的标签,如H1-H5,用了这些就会报错,其中html中的div标签,在微信中变成了view标签。(也就是换了个名字...)

      (4)app.js:

      app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API。代码主要是写在APP对象里面作用于全局。

      其中每个页面都可以有自己的js文件,例如index.js就是Index.wxml页面的js代码,其中js代码的一些应用主要是写在page对象里面。

      事件的使用方式:

      首先在wxml里面写入一个bindtap点击事件。

      <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

      然后再js的page对象中定义:
      就可以实现一个点击事件。其中bind是绑定,type为tap。type是事件类型。

      数据渲染:

      在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
  • 作为小程序开发者必须要懂的一些规则

    作为小程序开发者必须要懂的一些...2018-12-17

    微信公众号开发的温度有所降低了,现在有开始了微信程序开发了,其实这都是属于微信公众平台下的两大分支,目的就是为了打造和营造微信生态系统,当然我们也是参与了,就是帮助用户去实现在微信公众号上跟微信小程序上的一些插件开发工作,当然了另外一种参与者就是终端的用户了,这些用户都是非常积极的,也看到了微信小程序,维系公众号未来的发展前景了。

    开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南)本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志。

    微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」?我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧。为了让大家尽快看到这份教程,博卡君注定要熬夜了!今晚开始更新,希望明天一早就能发布第一篇教程!记录开始!看看几天能完成变身吧!


    01获取微信小程序的AppID

    首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号,登录https://mp.weixin.qq.com,就可以在网站的「设置」-「开发者设置」中,查看到微信小程序的 AppID 了。
    注意:如果我们不是用注册时绑定的管理员微信号,在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份-开发者」模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

    02创建项目
    我们需要通过开发者工具,来完成小程序创建和代码编辑。开发者工具安装完成后,打开并使用微信扫码登录。选择创建「项目」,填入上文获取到的 AppID,设置一个本地项目的名称(非小程序名称),比如「我的第一个项目」,并选择一个本地的文件夹作为代码存储的目录,点击「新建项目」就可以了。为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择「是」,开发者工具会帮助我们在开发目录里生成一个简单的 
    项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在「编辑」里可以查看和编辑我们的代码,在「调试」里可以测试代码并模拟小程序在微信客户端效果,在「项目」里可以发送到手机里预览实际效果。

    03编写代码
    点击开发者工具左侧导航的「编辑」,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js 后缀的是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API,如本例的同步存储及同步读取本地数据。

    //app.jsApp({
      onLaunch: function () {
        //调用API从本地缓存中获取数据
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
      },
      getUserInfo:function(cb){
        var that = this;    if(this.globalData.userInfo){      typeof cb == "function" && cb(this.globalData.userInfo)
        }else{      //调用登录接口
          wx.login({
            success: function () {
              wx.getUserInfo({
                success: function (res) {
                  that.globalData.userInfo = res.userInfo;              typeof cb == "function" && cb(that.globalData.userInfo)
                }
              })
            }
          });
        }
      },
      globalData:{
        userInfo:null
      }
    })
    app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

    {
      "pages":[    "pages/index/index",    "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }}
    app.wxss 是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。

    /**app.wxss**/.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;}

    04创建页面

    在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件,.wxml 后缀的文件是页面结构文件。

    index.wxml是页面的结构文件:

    <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    本例中使用了 、、来搭建页面结构,绑定数据和交互处理函数。

    index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

    //index.js//获取应用实例var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {}
      },  //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        console.log('onLoad')    var that = this
        //调用应用实例的方法获取全局数据
       app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
      }
    })
    index.wxss是页面的样式表:/**index.wxss**/.userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    .userinfo-nickname {
      color: #aaa;
    }
    .usermotto {
      margin-top: 200px;
    }
    页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
    index.json是页面的配置文件:
    页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
    logs的页面结构

    <!--logs.wxml--><view class="container log-list">
      <block wx:for-items="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block></view>
    logs 页面使用 控制标签来组织代码,在 上使用 wx:for-items 绑定 logs 数据,并将 logs 数据循环展开节点

    //logs.jsvar util = require('../../utils/util.js')
    Page({
      data: {
        logs: []
      },
      onLoad: function () {
        this.setData({
          logs: (wx.getStorageSync('logs') || []).map(function (log) {
            return util.formatTime(new Date(log))
          })
        })
      }
    })
    运行结果如下:
    05手机预览
    开发者工具左侧菜单栏选择「项目」,点击「预览」,扫码后即可在微信客户端中体验。目前,预览和上传功能尚无法实现,需要等待微信官方的下一步更新。如你所见,微信官方给出的开发指南还非常简单,很多细节、代码和功能都没有明确的展示,所以接下来就到博卡君展示实力的时候啦!开发教程正式开始!
    第一章:准备工作
    做好准备工作很重要。开发一个微信应用号,你需要提前到微信的官方网站(weixin.qq.com)下载开发者工具。下载最新微信开发者工具,打开后你会看到该界面:
    2点击「新建 web+」项目,随后出现如下画面:
    3该页面内的各项内容需要注意——
    AppID:依照官方解释来填。
    Appname: 项目最外层文件夹名称,如你将其命名为「ABC」,则之后的全部项目内容均将保存在「/ABC/…」目录下。本地开发目录:项目存放在本地的目录。
    注:再次强调,如果你和团队成员共同开发该项目,则建议你们使用同样的目录名称及本地目录,以确保协同开发的统一性。如果你之前已有项目,则导入过程与以上内容近似,不再赘述。
    4准备工作全部完成后,点击「新建项目」按钮,弹出框点「确定」。
    5如上图所示,此刻,微信开发者工具已经为你自动构建了一个初始的 demo项目 
    该项目内包含了一个微信应用项目所需具备的基本内容和框架结构。点击项目名称(图中即「cards」)进入该项目,就能看到整个项目的基本架构了:
    第二章:项目架构
    微信目前用户群体非常庞大,微信推出公众号以后,火爆程度大家都看得到,也同样推动着 Html 5 的高速发展,随着公众号业务的需求越来越复杂,应用号现在的到来也是恰到好处。
    微信提供给开发者的方式也在发生全面的改变:从操作 DOM 转为操作数据,基于微信提供的一个过桥工具实现很多 Html 5 在公众号很难实现的功能,有点类似于 hybrid 开发,不同于 hybrid 开发的方式是:微信开放的接口更为严谨,结构必须采用他提供给的组件,外部的框架和插件都不能在这里使用上,让开发者完全脱离操作 DOM,开发思想转变很大。工欲善其事,必先利其器。理解它的核心功能非常重要,先了解它的整个运作流程。
    生命周期:
    在index.js里面:
    开发者工具上 Console 可以看到:
    在首页 console 可以看出顺序是 App Launch–>App Show–>onLoad–>onShow–>onReady。
    首先是整个 app 的启动与显示,app 的启动在 app.js 里面可以配置,其次再进入到各个页面的加载显示等等。可以想象到这里可以处理很多东西了,如加载框之类的都可以实现等等。

    路由:
    路由在项目开发中一直是个核心点,在这里其实微信对路由的介绍很少,可见微信在路由方面经过很好的封装,也提供三个跳转方法。
    wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
    wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。
    wx.navigateBack():关闭当前页面,回退前一页面。这三个基本上使用足够,在路由方面微信封装的很好,开发者根本不用去配置路由,往往很多框架在路由方面配置很繁琐。
    组件:
    此次微信在组件提供方面也是非常全面,基本上满足项目需求,故而开发速度非常快,开发前可以认真浏览几次,开发效率会很好。
    其它:
    任何外部框架以及插件基本上无法使用,就算原生的 js 插件也很难使用,因为以前的 js 插件也基本上全部是一操作 dom 的形式存在,而微信应用号此次的架构是不允许操作任何 dom,就连以前开发者们习惯使用的动态设置的rem.js也是不支持的。
    此次微信还提供了 WebSocket,就可以直接利用它做聊天,可以开发的空间非常大。

029-8619 5145 180 6652 8545 西安嘉瑞德网络科技公司
工作时间:周一到周六 8:30-18:30
邮箱:2528823962@qq.com
QQ:2528823962
地址:陕西省西安市未央区元朔路明丰伯马都A座10820室
  • 微信小程序制作微信二维码
    扫码咨询
网站地图 Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备17015187号-1