0&&void0!==arguments[0]?arguments[0]:{}).mode&&(f=!0);vare=(0,a.getCurrentPages)();e.length&&(e[e.length-1].onHide(),(0,u.triggerAnalytics)("leavePage",e[e.length-1],!0)),this.onHide(),(0,u.triggerAnalytics)("background")},h=function(){vare=arguments.length>0&&void0!==arguments[0]?arguments[0]:{};if(0===e.scene||"0"===e.scene?e.scene=c:c=e.scene,e.query=e.query||{},(0,i.hasExitCondition)(e)&&(p=!0),this.onShow(e),(0,u.triggerAnalytics)("foreground"),d||e.reLaunch)d=!1;else{vart=(0,a.getCurrentPages)();t.length&&(t[t.length-1].onShow(),(0,u.triggerAnalytics)("enterPage",t[t.length-1],!0))}};if("undefined"!=typeof__wxConfig&&__wxConfig){vary=__wxConfig.appLaunchInfo||{};y.query=y.query||{},c=y.scene,(0,i.hasExitCondition)(y)&&(p=!0),this.onLaunch(y),(0,u.triggerAnalytics)("launch"),h.call(this,y)}else(0,i.error)("AppLaunchError","Cannotfind__wxConfig");wx.onAppEnterBackground(l.bind(this)),wx.onAppEnterForeground(h.bind(this)),_.call(this,"function"==typeoft.onPageNotFound)}returnr(e,[{key:"getCurrentPage",value:function(){(0,i.warn)("将被废弃","App.getCurrentPageisdeprecated,pleaseusegetCurrentPages.");vare=(0,a.getCurrentPage)();if(e)returne.page}}]),e}();这里会往App中注册一个事件,我们这里注册的是onLaunch事件,这里对应的是当小程序初始化时候会执行这个回调,所以原则上应该是Native装在成功后会执行这个函数,这里再详细点说明下H5与Native的交互流程(这里是我之前做Hybrid框架时候跟Native同事的交互约定,小程序应该大同小异):我们一般是在全局上会有一个对象,保存所有需要Native执行函数的对象,比如这里的onLaunch,Native在执行到一个状态时候会调用js全局环境该对象上的一个函数因为我们js注册native执行是以字符串key作为标志,所以Native执行的时候可能是window.app['onLauch...']('参数')而我们在window对象上会使用bind的方式将对应的作用域环境保留下来,这个时候执行的逻辑便是正确的这里在小程序全局没有找到对应的标识,这里猜测是直接在app对象上,Native会直接执行APP对象上面的方法,但是我这里有个疑问是View级别如果想注册个全局事件该怎么做,这个留到后面来看看吧,这里是Native载入webview时,会执行对象定义的onLaunch事件,在下面的代码看得到:这里会结合app.json获取首先容器层面的事件,我觉得,无论如何,这里应该是像微信容器注册事件了吧,但是我找不到全局的keyPage流程如果有微信小程序的同学,麻烦这里指点一下,是不是猜测正确,顺便可以帮忙说明下这里,这里也是我觉得全局key,被Native调用的点,然后,逻辑上会获取默认view的类开始做实例化,我们这里来到view级别代码://index.js//获取应用实例constapp=getApp()Page({data:{motto:'HelloWor11ld',userInfo:{},hasUserInfo:false,canIUse:wx.canIUse('button.open-type.getUserInfo')},//事件处理函数bindViewTap:function(){wx.navigateTo({url:'../logs/logs'})},onLoad:function(){if(app.globalData.userInfo){this.setData({userInfo:app.globalData.userInfo,hasUserInfo:true})}elseif(this.data.canIUse){//由于getUserInfo是网络请求,可能会在Page.onLoad之后才返回//所以此处小程序架构做了简单的摸索,这里发现事实上小程序流程与自己所想有一些出入,这里初步认为流程是这样的:①我们写好小程序代码后,提交代码②在发布流程中我们的代码经过构建流程,app.json以及入口的index.html(伪造页面),重新组装为一个只有js代码的空页面③这里开始载入流程,用户点击一个微信按钮,进入小程序④微信容器开启Hybrid容器,webview载入入口页面(我感觉应该有个规则可以通过url去打开固定一个小程序页面,这里后续碰到开发案例再说)⑤webview执行环境实例化App,其后自动装载默认Page(这里默认是index)PS:这里我有个很疑惑的点,微信Native容器的各个事件点什么时候执行,由谁执行?">
首页 电商 正文

哪些行业适合做微信小程序开发? 微信小程序的执行流程是怎么样的?

2024-03-21 19:32
admin

微信小程序是一个诞生于2017年的,基于微信运行的手机应用。由于是基于微信运行,所以在小程序的背后蕴藏着巨大的流量红利,因此很多企通过小程序获得了巨大的收益。但仍有一部分企业和商家,由于对小程序不了解,因此担心小程序不适合自己的行业。下面请具有丰富开发经验的广州三鸣科技的技术总监来给大家解答。

1.实体店

由于受到互联网的冲击,很多实体门店获客也能越难。现如今,在人们越来越习惯在网上购物的背景下,对于实体店们而言,开发一个小程序,不仅能够提升自己的曝光度、知名度,以便获得更多流量。而且还能直接让客户通过小程序购买产品,从而线上+线下的销售模式,提升自己的收益。

2.电商

小程序与传统电商平台相比,没有入驻费,也没有高额的抽成,这样一来,企业就可以节省下一大笔资金。此外,小程序是企业和商家自己的平台,所以在这个平台上没有其他竞争对手,这样一来企业和商家不仅能避免因商品同质化导致的客户流失。

商人在展示中伸出手的组合形象

3.医疗行业

医院里总是人满为患,无论是挂号、取药、付款都需要排队,但如果拥有小程序,就可以让患者直接通过小程序挂号、付款,这样一来就可以大大节省患者排队等待的时间,提升患者的就诊体验。同时,还能帮助医院优化工作流程、提升工作效率,从而优化人力,降低用人成本。

在医学的创新技术。混合媒体

4.餐饮行业

“中午吃什么,晚上吃什么”这可能是我们每天都要思考的问题吧。但现在,可以直接通过小程序来查找附近的餐厅,在找到喜欢的餐厅后,可以直接通过小程序排队、点餐。到了餐厅之后,直接就可以落座,等菜上桌,大大节省了排队、等待服务人员点餐时消耗的时间。对于餐厅而言,节省客户的等待时间,有利于提升客户的消费体验,从而增小程序的执行流程是怎么样的?

①底层框架解决开发效率,将复杂的部分做成一个黑匣子,给页面开发展示的只是固定的三板斧,固定的模式下开发即可

②工程部门为业务开发者封装最小化开发环境,最优为浏览器,确实不行便为其提供一个类似浏览器的调试环境

如此一来,业务便能快速迭代,因为业务开发者写的代码大同小异,所以底层框架配合工程团队(一般是同一个团队),便可以在底层做掉很多效率性能问题。

稍微大点的公司,稍微宽裕的团队,还会同步做很多后续的性能监控、错误日志工作,如此形成一套文档->开发->调试->构建->发布->监控、分析为一套完善的技术体系

如果形成了这么一套体系,那么后续就算是内部框架更改、技术革新,也是在这个体系上改造,但很可惜,很多团队只会在这个路径上做一部分,后面由于种种原因不在深入,有可能是感觉没价值,而最恐怖的行为是,自己的体系没形成就贸然的换基础框架,戒之慎之啊!

从第三方应用接入来说,微信应该是做的最好的,百度这边有直达号等类似的产品,但是其体系化感觉还是有待提高的,阿里应该也有类似的技术产品诞生,从我们这层来说,都没有太多知晓,所以要么是运营的不好要么是做的不好。

而从小程序诞生以来,我这边便一直在关注,至今整个小程序体系已经十分完备了,腾讯小程序和腾讯云深度整合了,如果使用内测的开发者工具,全免费,纯js就搞定小程序前后端,不用服务器、存储、cdn、服务代码,都是免费,开发完后端不用自己运维,大杀器的节奏,我有时候在想,腾讯的技术实力真的是强啊!

小程序的结构追溯

小程序的开发文档还是比较完善的,依旧是账号申请->demo流程,等熟悉后便可以走代码上架等流程了,前端代码用工具构建后上传,后台服务自己维护,配置地址映射,我们这里仅关注开发流程,所有使用其测试账号即可。

Appidwx0c387cc8c19bdf78

appsecretacd6c02e2fdca183416df1269d2e3fb9

经过一年多的发展,小程序形成的文档已经比较完善了,我们可以从文档和demo对小程序做出大概的判断:

这里就是小程序给业务人员可以看到的代码了,我们从这个代码以及运行,基本可以将小程序的梗概猜测一番,这里首先看看其全局控制器APP:

//app.js

App({

onLaunch:function(){

//展示本地存储能力

varlogs=wx.getStorageSync('logs')||[]

logs.unshift(Date.now())

wx.setStorageSync('logs',logs)

//登录

wx.login({

success:res=>{

//发送res.code到后台换取openId,sessionKey,unionId

}

})

//获取用户信息

wx.getSetting({

success:res=>{

if(res.authSetting['scope.userInfo']){

//已经授权,可以直接调用getUserInfo获取头像昵称,不会弹框

wx.getUserInfo({

success:res=>{

//可以将res发送给后台解码出unionId

this.globalData.userInfo=res.userInfo

//由于getUserInfo是网络请求,可能会在Page.onLoad之后才返回

//所以此处小程序事实上依旧是提供的webview执行环境,所以我们依旧可以在js环境中访问window、location等属性

②微信小程序提供的展示的全部是Native定制化的UI,所以不要去想DOM操作的事

这里各位可以想象为,小程序界面中有一块webview在执行真正的代码逻辑,只不过这个webview除了装载js程序什么都没做,而所有的页面渲染全部是js通过URLSchema或者JSCore进行的Native通信,叫Native根据设置的规则完成的页面渲染。

全局控制器App

这里我们重点关注全局控制器App这个类做了什么,因为拿不到源码,我们这里也只能猜测容器会准备一个webview容器为我们的js代码提供宿主环境,容器与构建工具会配合产出以下页面:

他在这里应该执行了实例化App的方法:

这一坨代码,在这个环境下便相当晦涩了:

y=function(){

functione(t){

varn=this;

o(this,e),

s.forEach(function(e){

varo=function(){

varn=(t[e]||i.noop).bind(this);

Reporter.__route__="App",

Reporter.__method__=e,

(0,

i.info)("App:"+e+"havebeeninvoked");

try{

n.apply(this,arguments)

}catch(t){

Reporter.thirdErrorReport({

error:t,

extend:"atApplifeCycleMethod"+e+"function"

})

}

};

n[e]=o.bind(n)

});

for(varrint)

!function(e){

g(e)?(0,

i.warn)("关键字保护","App's"+e+"iswrite-protected"):v(e)||("[objectFunction]"===Object.prototype.toString.call(t[e])?n[e]=function(){

varn;

Reporter.__route__="App",

Reporter.__method__=e;

try{

n=t[e].apply(this,arguments)

}catch(t){

Reporter.thirdErrorReport({

error:t,

extend:"atApp"+e+"function"

})

}

returnn

}

.bind(n):n[e]=t[e])

}(r);

this.onError&&Reporter.registerErrorListener(this.onError);

varl=function(){

"hang"===(arguments.length>0&&void0!==arguments[0]?arguments[0]:{}).mode&&(f=!0);

vare=(0,

a.getCurrentPages)();

e.length&&(e[e.length-1].onHide(),

(0,

u.triggerAnalytics)("leavePage",e[e.length-1],!0)),

this.onHide(),

(0,

u.triggerAnalytics)("background")

}

,h=function(){

vare=arguments.length>0&&void0!==arguments[0]?arguments[0]:{};

if(0===e.scene||"0"===e.scene?e.scene=c:c=e.scene,

e.query=e.query||{},

(0,

i.hasExitCondition)(e)&&(p=!0),

this.onShow(e),

(0,

u.triggerAnalytics)("foreground"),

d||e.reLaunch)

d=!1;

else{

vart=(0,

a.getCurrentPages)();

t.length&&(t[t.length-1].onShow(),

(0,

u.triggerAnalytics)("enterPage",t[t.length-1],!0))

}

};

if("undefined"!=typeof__wxConfig&&__wxConfig){

vary=__wxConfig.appLaunchInfo||{};

y.query=y.query||{},

c=y.scene,

(0,

i.hasExitCondition)(y)&&(p=!0),

this.onLaunch(y),

(0,

u.triggerAnalytics)("launch"),

h.call(this,y)

}else

(0,

i.error)("AppLaunchError","Cannotfind__wxConfig");

wx.onAppEnterBackground(l.bind(this)),

wx.onAppEnterForeground(h.bind(this)),

_.call(this,"function"==typeoft.onPageNotFound)

}

returnr(e,[{

key:"getCurrentPage",

value:function(){

(0,

i.warn)("将被废弃","App.getCurrentPageisdeprecated,pleaseusegetCurrentPages.");

vare=(0,

a.getCurrentPage)();

if(e)

returne.page

}

}]),

e

}();

这里会往App中注册一个事件,我们这里注册的是onLaunch事件,这里对应的是当小程序初始化时候会执行这个回调,所以原则上应该是Native装在成功后会执行这个函数,这里再详细点说明下H5与Native的交互流程(这里是我之前做Hybrid框架时候跟Native同事的交互约定,小程序应该大同小异):

我们一般是在全局上会有一个对象,保存所有需要Native执行函数的对象,比如这里的onLaunch,Native在执行到一个状态时候会调用js全局环境该对象上的一个函数

因为我们js注册native执行是以字符串key作为标志,所以Native执行的时候可能是window.app['onLauch...']('参数')

而我们在window对象上会使用bind的方式将对应的作用域环境保留下来,这个时候执行的逻辑便是正确的

这里在小程序全局没有找到对应的标识,这里猜测是直接在app对象上,Native会直接执行APP对象上面的方法,但是我这里有个疑问是View级别如果想注册个全局事件该怎么做,这个留到后面来看看吧,这里是Native载入webview时,会执行对象定义的onLaunch事件,在下面的代码看得到:

这里会结合app.json获取首先容器层面的事件,我觉得,无论如何,这里应该是像微信容器注册事件了吧,但是我找不到全局的key

Page流程

如果有微信小程序的同学,麻烦这里指点一下,是不是猜测正确,顺便可以帮忙说明下这里,这里也是我觉得全局key,被Native调用的点,然后,逻辑上会获取默认view的类开始做实例化,我们这里来到view级别代码:

//index.js

//获取应用实例

constapp=getApp()

Page({

data:{

motto:'HelloWor11ld',

userInfo:{},

hasUserInfo:false,

canIUse:wx.canIUse('button.open-type.getUserInfo')

},

//事件处理函数

bindViewTap:function(){

wx.navigateTo({

url:'../logs/logs'

})

},

onLoad:function(){

if(app.globalData.userInfo){

this.setData({

userInfo:app.globalData.userInfo,

hasUserInfo:true

})

}elseif(this.data.canIUse){

//由于getUserInfo是网络请求,可能会在Page.onLoad之后才返回

//所以此处小程序架构做了简单的摸索,这里发现事实上小程序流程与自己所想有一些出入,这里初步认为流程是这样的:

①我们写好小程序代码后,提交代码

②在发布流程中我们的代码经过构建流程,app.json以及入口的index.html(伪造页面),重新组装为一个只有js代码的空页面

③这里开始载入流程,用户点击一个微信按钮,进入小程序

④微信容器开启Hybrid容器,webview载入入口页面(我感觉应该有个规则可以通过url去打开固定一个小程序页面,这里后续碰到开发案例再说)

⑤webview执行环境实例化App,其后自动装载默认Page(这里默认是index)

PS:这里我有个很疑惑的点,微信Native容器的各个事件点什么时候执行,由谁执行?

⑥进入页面渲染逻辑

⑦……

这里我还比较在意,执行事件后,对应Native页面是如何进行更新的,所以我们这里关注下这段代码:

debugger;

this.setData({

userInfo:app.globalData.userInfo,

hasUserInfo:true

})

这里出现了一段非常关键的代码:

可以看到,我们这里往微信容器注册了一个appDataChange的异步事件,而这个时候就将所有的逻辑交给了Native本身,Native执行结束后会根据webviewIds找到后续要执行的回调继续执行。

至于,容器如何使用webviewId找到对应函数的代码,我没有找到。至此,我们对小程序结构的初步探索便结束了,我们本周后面时间继续来对小程序进行深入学习。

信息转载自网络,更多相关信息请点击:微信营销http:///shhmt/wxyx/

相关文章

  • 京东好物街小程序可靠吗?是什么?

    京东好物街小程序可靠吗?是什么? 现在有很多人在微信上使用各种小程序,有的人就发现了这些小程序中有一个京东好物街小程序,但是不知道这个小程序是不是京东官方开发的,上面的商品质量是否有保证呢?下面具体了解下。京选好物街是一个自用省钱,分享赚钱的新零售社交电商平台,也是一个京东优惠券领取平台,是您在京东购物省钱的好帮手!该平台采用会员制,普通会员在平台领券购物可省钱,超级会员不仅可以自购省钱,还可以通过分享和推广平台产品赚取佣金,平台

    2024-03-13 19:01
  • 京东好物街是什么情况?是什么东西?

    京东好物街是什么情况?是什么东西? 京东好物街是京东的一个购物小程序,所以它是属于京东旗下的。针对这个新推出的功能,很多的京东用户们还不太了解,到底京东好物街是怎么一回事呢?下面为大家进行介绍。京选好物街是一个自用省钱,分享赚钱的新零售社交电商平台,也是一个京东优惠券领取平台,是您在京东购物省钱的好帮手!该平台采用会员制,普通会员在平台领券购物可省钱,超级会员不仅可以自购省钱,还可以通过分享和推广平台产品赚取佣金,平台所有产品均来自

    2024-03-13 19:00
  • 京东好物街和京东是什么关系?是什么?

    京东好物街和京东是什么关系?是什么? 京东好物街智能小程序主要以自营产品为出口,加上京东品牌直接背书,为用户提供品质保证,减少比对、筛选环节,带来了一种小而精的购物体验。,因此百度的优质流量使京东好物街智能小程序在拉新方面成绩突出。,当用户搜索商品时,结果就会出现在京东好物街小程序上,当用户进行下拉信息流的时候,基于兴趣,会二次被推送到京东好物上的产品。

    2024-03-13 18:58
  • 京东好物街和京东是一样吗?有何关系?

    京东好物街和京东是一样吗?有何关系? 京东好物街智能小程序主要以自营产品为出口,加上京东品牌直接背书,为用户提供品质保证,减少比对、筛选环节,带来了一种小而精的购物体验。,因此百度的优质流量使京东好物街智能小程序在拉新方面成绩突出。,当用户搜索商品时,结果就会出现在京东好物街小程序上,当用户进行下拉信息流的时候,基于兴趣,会二次被推送到京东好物上的产品。

    2024-03-13 18:31
  • 京东好物街是京东的吗?和京东有何关系呢?

    京东好物街是京东的吗?和京东有何关系呢? 小程序已成为了一块充满想象力和创造力的电商新土壤,对于不少创业者来说,是完全可以完美利用的肥沃土壤。京东作为头部电商之一,也一直在探索着各种电商小程序模式,那么,京东好物街是京东的吗?京东好物街也是京东的开发的一个小程序,属于京东旗下的。所以商品的质量都是有保证的,但是也要注意,有些小程序可能是假冒的,所以我们要找那些被认证过的小程序使用,它和京东有何关系呢?京选好物街是一个自用省钱,分享赚钱的新

    2024-03-13 18:15
  • 微信小店开店详细流程,微信开店怎么开?

    微信小店开店详细流程,微信开店怎么开? 现在有商品信息发布、直播等功能,可以直接在微信小商店的网站上申请。,正是因为这种不完美,大多数商家通常会用第三种方法开小程序开店。,点击展开全文 微信小店 赞 (0) 电商编辑作者

    2024-03-18 10:01
  • 微信小程序要怎么玩?,二人对战的微信小程序?

    微信小程序要怎么玩?,二人对战的微信小程序? 二是无歧视地引导用户社交交流,比如邀请很多朋友砍价、组团等,从而达到产品曝光度、流量提升的目标。,一家企业a试图通过数据分析,了解平台小程序用户的社会传播状况,微信小程序优化产品提高传播效率,优化运营战略以达到裂变流量的目标。,为了实现这个目标,企业首先必须明确无论是一对一还是一对多,都存在始发者、接收者两种作用。

    2024-03-18 10:00
  • 支付宝预约出入境号码是什么?

     支付宝预约出入境号码是什么? 据了解,这款支付宝小程序由武汉市公安局出入境管理局、杭州立万数据科技共同开发,于2023年12月26日上线。,武汉市公安局出入境管理局项目负责人表明,支付宝小程序轻盈、灵活度大,与出入境事务场景刚好符合,“一般护照、通行证的有效期是 10 年,用户处理频次和粘性不高,重视公众号或许下载App仅用一次,对他们来说也比较负担,但小程序用完即走,就有效处理了这个问题。,” 1 月 8 日,支付宝小程序宣

    2024-03-14 16:17
  • 支付宝小程序最新消息是什么?

     支付宝小程序最新消息是什么? 支付宝小程序最新消息是什么?支付宝从上一年就在研制支付宝小程序了,重视支付宝小程序的人有许多,以下是小编整理的支付宝小程序最新消息哦,小编来帮大家了解支付宝小程序怎么样了。

    2024-03-14 16:16
  • 支付宝小程序开发的步骤是什么?

     支付宝小程序开发的步骤是什么? 付出宝小程序开发的过程是什么?付出宝小程序现在处于公测傍边,有付出宝用户问小编付出宝小程序怎么开发?以下是小编整理的付出宝小程序开发的过程哦,以下的内容供我们参考哦。付出宝小程序开发的过程是什么? 电脑上打开蚂蚁金服敞开渠道,然后使用企业付出宝账号登录。 打开蚂蚁金服敞开渠道今后。点击进入开发者中心,然后创立小程序。 创立付出宝小程序成功后,可在小程序详情页检查小程序的APPI

    2024-03-14 16:15