前端开发中一直比较困扰的两个难点，就是h5端和小程序。因为两者既有相同点，又有不同点。今天就简单的介绍一下两者混合开发。那么混合开发的优点在哪呢？

        首先第一点：小程序的审核周期以及审核流程的复杂度。相信开发过小程序的开发者都踩过其中的坑。

        第二点：对于初级开发者对于小程序的开发并不是那么熟悉，需要去学习开发者文档。在摸索中开发，开发成本过大，耗时久。    

【实现逻辑】

        下面就简单的介绍一下小程序和h5的混合开发：核心就是我们做出一个小程序基本功能的模板，

        其中微信授权登录和微信获取手机号码显得尤为重要。其次就是在小程序和h5端的互相跳转。

【具体步骤】

        1.公众号跳转到小程序进行授权登录。

        首先需要明白的是，小程序的授权登录是微信发起的。在这里推荐使用微信官方的高版本：jweixin-1.3.2.js。因为微信扫码也会用到。

        我们在从H5端跳转到小程序进行授权登录。也就是说我们需要点击事件的实现。具体点击事件加在哪里，根据实际情况而定。这里会出现环境的判断，是否为小程序环境。因为授权登录毕竟是要在小程序端实现的。下面看代码：    

jumpProgram:function(e){ //jumpProgram：点击事件的名称

var that=e.data.context;

console.log('跳转小程序');

if(that.isMiniProgram){ //isMiniProgram：判断是否为小程序环境

that.wx.miniProgram.redirectTo({ //miniProgram：跳转函数

url: '/pages/alert/alert'

})

}

}，

备注：这里微信会进行一次身份验证。也就是wx变量的引入

wx.config({

debug:this.ops.info.debug,

appId:this.ops.info.appId,

timestamp:this.ops.info.timestamp,

nonceStr:this.ops.info.nonceStr,

signature:this.ops.info.signature,

jsApiList:this.ops.info.jsApiList

});

//小程序的跳转函数

MiniProgram:function(){

return (navigator.userAgent.match(/micromessenger/i) && navigator.userAgent.match(/miniprogram/i)) || window.__wxjs_environment === 'miniprogram';

},

        具体的要跳转的小程序路径是自己定义的。应为小程序模板的授权是在alert页面的。所以我就是这么来定义的。这样就实现了从h5端跳转到小程序。   

    2.小程序跳转公众号：

    首先需要了解小程序的场景值变量：scene。它可以获取到小程序当前的页面和具体的参数。

    我们可以拿到需要的参数进行具体的操作。还需要进行一步重要的操作就是模拟扫码登录

    这种跳转我是放在当审核版本号不相等的时候。因为什么审核的时候没有必要：

if(options && options.type === 'index' && options.fake_id && app.globalData.agent_id==99101){

url = app.URL + 'weichat_enter_4_app_wholefarm?fake_id=' + options.fake_id + '&empower_code=5678'

}

//globalData.agent_id：我们定义的全局变量，也就是从scene拿到的变量，因为这个变量后续会进行一系列的模拟扫码操作

else if (options && options.type === 'index' && options.fake_id && !app.globalData.agent_id){

console.log(123)

url = app.URL + 'weichat_enter_4_app_wholefarm?fake_id=' + options.fake_id + '&empower_code=5678'

}

else if(options && options.type === 'index' && options.fake_id && app.globalData.agent_id !==99101){

console.log(456);

url = app.URL + 'weichat_enter_4_app_wholefarm?fake_id=' + options.fake_id + '&empower_code=5678'+'&jump_type=701'+'&new_page=400_application_4_process.html'+'&new_page_para=id_public_goods_order_record-_-'+app.globalData.agent_id+'&id_public_agent_info=99101'

}else {

url = app.URL + '004_mobile_web_site_lishui_auto/front_page_index.html';

}

//此处为跳转到公众号中。

        3.快速审核机制

        首先需要明白，我们提交的版本。是提供给什么人员查看的，所以是我们在编写静态页面就已经准备好的数据。我们需要定义一个全局变量。决定版本的全局变量。我们在加载一个后端返回给我们的变量。如何两者相等，就是我们准备好给审核人员查看的版本。要记得，当我们提交完代码审核之后，我们的小程序代码是不能改动的，所以后端在将版本号修改一下，两者版本号不相等，我们就可以拿到动态数据了。之后具体的页面跳转，就要根据实际项目需要，进行实际跳转。

if (parseInt(data.shenhe_banben.version_name) === app.DATA.version)

        容易踩坑的点：

        1.公众号跳转小程序，微信的授权问题。对于wx变量的定义。

        2.扫码和微信授权的兼容问题。建议直接使用微信提供的高版本js文件。

        3.小程序跳转公众号的条件判断。这个要根据实际项目的理解。

        4.小程序使用开发者工具，使用二维码编译。对于scene中参数的获取，理解以及实际应用。

        以上就是全部内容，只提供大的解决方案。具体细节的话，要根据实际项目而定。