微信小程序开发公司踩过的坑你可别再踩了,凡是从事软件开发工作的技术或者公司多多少少都踩过一些坑,都都在不了解整体开发的形势下做出的一种无知举措,在现如今,微信小程序的开发进入了火热阶段,好多公司和技术都投身于微信开发方面来了,面对客户的一些外包需求,肯定有些在不之情的情况下,很有可能做出错误的决定的,汤坑在小编看来是无法避免的,所以说,小程序开发外包公司在跟客户签订合同之前,一定要做好前期的准备工作对一些不了解的,不清楚的接口先在网络上查询好之后在做决定,不要盲目的签合同,负责很容易跳坑的。
小程序提供了一个框架,微信称之为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。开发者不用考虑平台,开发成本低。但同时不适合开发逻辑复杂界面丰富的程序,受到框架限制,随意性小,无法满足所有功能。
小程序开发公司目前从在的难题有那些呢?只要是做软件开发外包的服务公司目前都从在这些方面的的问题,最为核心和关键的就是业务问题跟技术的问题,这也是做为软件外包公司面临生存和发展的自大问题了,主要原因是这个行业竞争太大,好多的业务没有一个稳定的心态去长期在这个行业从事和发展下去,另外就是技术人员的心态了,作为技术性的外包公司,不仅仅是要专业的技术骨干人才,而且还需要能够从事开发,挑大梁的技术大牛,但是好多软件技术外包公司面临一个问题是,不怕花钱请技术大牛,也不怕培养技术人才,唯一害怕的是培养出来的技术人员没过过久,技术成长起来就立马跳槽寻找其他的公司涨工资,现在好多的外包公司成为这技术人才成长和联系的地方了,所以作为一家专业的技术外公司,不仅仅面临的是这些问题,还有更多的问题,接下来我们来详细的看看。
一、需求确定问题
小程序是可以作为服务号的辅助没错,有的品牌甚至依靠小程序提升了不少业务量。但如果盲目选择开发了一个用户不需要、使用量不够高的小程序,投入使用后,前期付出的人力物力得不到相应的回报,那就得不偿失了
所以开发小程序时遇到的第一个难题,就是要确定需求:企业需不需要小程序、需要什么类型的小程序。
小程序更适合线上线下需要紧密结合的品牌,更适合那些高频次、用完即走、功能需求不是非常复杂的品牌方,比如摩拜单车、麦当劳、肯德基、今日头条等。所以开发小程序时对小程序的定位、要求都要考虑清楚。
二、产品原生问题
小程序发布至今才半年多,虽然因为开发程序少,门槛低得到一众好评,但毕竟是初生牛犊,仍然具有或多或少的原生问题。
接口:小程序目前已经开放近 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 ,内存限制预示着功能的减少;微信还对小程序有其它的限制:比如不能进行个性化定制,不能开发会员体系。这些都降低了小程序的开发成本。
不难看出,对于普通中小企业来说,要自己组建一支小程序开发团队无论从时间成本还是人力成本来看,都是一桩不太划算的投入。随着品牌方对于小程序开发的需求量的与日俱增,市场上涌现出一大批优秀的开发团队或者企业,上线了就是其中优秀的代表。
五、小程序推广问题
小程序上线后,要面临的第一个问题就是推广。小程序中推广上的主要有四个难点: 无粉丝、无文章推送、无小程序商店、无朋友圈分享功能。它没有自我展示与推广的平台,也无法通过朋友圈分享传播。
所以品牌方若想推广自己的小程序,则需要借助广撒小程序码,服务号引导、文章推送广告来实现了。
六、数据监测问题
由于没有粉丝,无法转发朋友圈等限制,使得小程序的数据监测看上去有些难。还好,目前微信官方提供了基础统计功能“小程序数据助手”,可以实时监测到小程序的各项指标数据,方便运营与开发人员作出相应的调整与提升。
综上所述,虽然小程序目前存在一些问题,但它正是开启互联网下一个时代的起点,而且它正在迅速完善自己。在大众对于体验越来越注重的今天,如何用好小程序,是每一个品牌都需要认真看待的课题。
微信小程序的运行流程详解,作为专业的技术人员,今天就跟大家探讨一下微信小程序是如何在计算段运行的,运行的顺序是一个什么样的流程呢,不过这些是专业的技术人员专注的东西,作为一名专业的微信小程序开发人员,就根本大家探讨一下这方面的专业知识。我们这里来追溯一下小程序架构层的执行逻辑,从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)。
小程序开发的技术高手都是实践出来的,自从小程序诞生后,出现了好多的追随者,都是从是微信小程序开发者的技术人员,另微信公众号出现之前也出现了好多的参与者,他们都是技术性的人才,目的就是学习和了解微信公众平台上的开发资料。凡是微信公众平台跟微信小程序开发高手都是利用很多的开发项目实战和练习出来的,没有任何人天生就是天才,都是通过每一个大大小小的项目研究,然后得出的一些开发方面的的技术心得罢了。接下来我们来看看我们公司的微信小程序开发技术是如何看待小程序开发工作的。
微信是提供了开发工具的,就是这个,集合了编辑、调试、编译、发布等功能,一个正儿八经的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、最难的事情,运营
怎么说呢,虽然背后就是微信这个超级大腿,但小程序的整体量级并没有起来,或者说并没有达到人们预期的那种程度。在这种情况下搞运营推广,就多了一个教育成本。比如我把识花君分享给我二姨,还要花半天时间教她怎么用。下次要用,还来问我,还找不到入口在哪。我相信普通用户也有这样的问题。
小程序开发框架的逻辑层是由JavaScript编写。 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。小程序再次基础上做了一些修改方便开发: 增加 APP 和 Page 方法,进行程序和页面的注册。APP( ) 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
生命周期函数为:
onLoad: 页面加载微信公众号开发的温度有所降低了,现在有开始了微信程序开发了,其实这都是属于微信公众平台下的两大分支,目的就是为了打造和营造微信生态系统,当然我们也是参与了,就是帮助用户去实现在微信公众号上跟微信小程序上的一些插件开发工作,当然了另外一种参与者就是终端的用户了,这些用户都是非常积极的,也看到了微信小程序,维系公众号未来的发展前景了。
开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南)本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志。
微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」?我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧。为了让大家尽快看到这份教程,博卡君注定要熬夜了!今晚开始更新,希望明天一早就能发布第一篇教程!记录开始!看看几天能完成变身吧!