微信小程序开发嵌入式H5开发经验受朋友委托某公司开发微信小程序。本来开发一半是用native开发，但是客户要求用h5开发，所以选择了uniapp开发框架。之前没有开发微信小程序的经验；基本上我是对照着文档和百度一步步开发的，所以有必要总结一下1.准备工作（1）申请小程序的微信公众平台地址；基本上是给腾讯Request填写审核的（2）选择WeChatappid。开发管理选择->开发设置（3）下载微信开发者可以根据自己的系统情况进行下载。配置开发规范和文档参考官方文档，之前由userinfo授权，版本升级后由getUserProfile授权。附上代码index.wxml。模板部分代码申请以下权限获取你的公开信息（昵称、头像等）授权登录请升级微信版本js代码主要使用getUserProfile,getStorageSync,登录语法varApp=getApp()Page({data:{//判断当前版本是否有小程序的API、回调、参数、组件等。canIUse:false,//可以使用getUserProfileisHide:false,//判断是否显示授权页面},onLoad:function(){varthat=this;if(wx.getUserProfile){this.setData({canIUse:true})}varuser=wx.getStorageSync('user')||{};varuserInfo=wx.getStorageSync('userInfo')||{};App.globalData.userInfo=userInfo;//缓存用户信息App.globalData.userId=user.id;//用户idconsole.log('cacheddata',user,userInfo)//不取信息if(user.id&&userInfo.rawData){wx.navigateTo({url:"/pages/webview/index"})//that.setData({//isHide:false//});//this.login();}else{that.setData({isHide:true});}////检查是否授权//wx.getSetting({//success:function(res){//if(res.authSetting['scope.userInfo']){//wx.getUserProfile({//success:function(res){//App.globalData.userInfo=res;////用户已经授权，不需要显示授权页面，所以不需要改变isHide的值////我这里实现的是用户授权成功后调用微信的wx.login接口授权获取代码//that.login()//}//});//}else{////用户没有被授权////改变isHide的值显示授权页面//that.setData({//isHide:true//});//}//}//});},//开启授权接口bindGetUserInfo:function(e){//调试器wx.getUserProfile({desc:'Authorizedlogin',//声明获取用户个人信息的目的，会在pop-upwindowlater,success请仔细填写:(res)=>{App.globalData.userInfo=res;wx.setStorageSync('userInfo',res);this.setData({isHide:false});this.login()},fail:()=>{wx.showToast({title:'小程序获取信息被拒绝，将无法进入小程序，进入前请授权',icon:'none'});}})},login(){wx.login({success:res=>{//获取用户代码后：res.codeconsole.log("用户代码："+res.code);//它可以传给后台，然后解析得到用户的openid//或者直接然后使用微信提供的接口直接获取openid，方法如下：wx.request({//自己填写自己的APPID和SECRET//url:'https://api.weixin.qq.com/sns/jscode2session?appid=你自己的APPID&secret=你自己的SECRET&js_code='+res.code+'&grant_type=authorization_code',url:'xx',method:"post",header:{'content-type':'application/x-www-form-urlencoded'},data:{code:res.code,rawData:App.globalData.userInfo.rawData,secret:"f0a0818475ccd078edbcfde23a6bb02e",appId:"wx356c577df5a82dff"},success:res=>{//获取用户的openidconsole.log("用户的openid:"+res.data.result.id);App.globalData.userId=res.data.result.id;wx.setStorageSync('user',res.data.结果);this.setData({isHide:false});wx.navigateTo({url:"/pages/webview/index"})}});}});}})5.组件开发及引用(1)导入外部组件项目中引用vant-ui下载安装并放在指定位置(2)开发组件(3)组件使用(4)用于开发语法请参考vue开发思路数据传输、监听、事件发送、事件监听6、webview如何通信（传递参数）7、如何引入插件（同声传译）8、代码上传部署2、h5开发1、下载h-builder开发工具2、初始化项目h5和其他界面，使用#if方法条件处理区分开发3、配置h5界面，主要是界面的配置，比如tabar、topbar、page标题彩条、背景、字体和微信原生的语法配置基本类似。4、配置地图使用的qq地图（marker、polyline、positioning、hierarchy）需要提前在qqmap申请开发者key；然后以脚本标签的形式导入代码initPolyline(map){//初始化this.unSurePolylines.map(item=>{letpoints=item.points.split(";").map(pstr=>{return{纬度：pstr.split(",")[0],longtitde:pstr.split(",")[1]}});letpath=points.map(p=>{returnnewqq.maps.LatLng(p.latitude,p.longtitde)})letmax=this.getMaxLatitude(points);this.initLable({...max,name:item.name});varpolyline=newqq.maps.Polyline({路径:path,strokeColor:'#38E9EB',strokeWeight:5,name:item.name||"测试线2",strokeDashStyle:"dash",editable:false,map:地图});qq.maps.event.addListener(polyline,'click',(res)=>{alert(res.target.name)})})this.surePolylines.map(item=>{letpoints=item.points.split(";").map(pstr=>{return{latitude:pstr.split(",")[0],longtitde:pstr.split(",")[1]}});让路径=点。map(p=>{returnnewqq.maps.LatLng(p.latitude,p.longtitde)})letmax=this.getMaxLatitude(points);this.initLable({...max,name:item.name});varpolyline=newqq.maps.Polyline({path:path,strokeColor:'#38E9EB',strokeWeight:5,name:item.name||"测试线2",editable:false,map:map});qq.maps.event.addListener(polyline,'click',(res)=>{alert(res.target.name)})})//varpath2=points.map(item=>{//返回新的qq.maps.LatLng(item.latitude,item.longitude)//})//varpath1=points1.map(item=>{//返回新的qq.maps.LatLng(item.latitude,item.longitude)//})//varmax1=this.getMaxLatitude(points1);//this.initLable(max);//this.initLable(max1);//varpolyline=newqq.maps.Polyline({//路径：path1,//strokeColor:'#38E9EB',//strokeWeight:5,//name:"测试线2",//editable:false,//map:map//});//varlabel1=this.getMaxLatitude(points);//varpolyline1=newqq.maps.Polyline({//path:path2,//strokeColor:'#E3C395',//strokeWeight:5,//editable:false,//strokeDashStyle:"dash",//name:"测试线1",//map:map//});//qq.maps.event.addListener(map,'click',function(res){////调试器//});//qq.maps.event.addListener(polyline,'click',(res)=>{//alert(res.target.name)//})//qq.maps.event.addListener(polyline1,'click',(res)=>{//警报(res.target.name)//});},//初始化点位initMakers(map){this.areaPoints.map(item=>{varlatitude=item.center.split(",")[0];varlongtitde=item.center.split(",")[1];varmarker=newqq.maps.Marker({icon:icon1,map:map,name:item.name,position:newqq.maps.LatLng(latitude,longtitde)});this.initLable({...item,latitude:latitude,longtitde:longtitde});qq.maps.event.addListener(marker,'click',(res)=>{alert(res.target.name)})})},/**初始化label*@param{Object}item*/initLable(item){varcssC={颜色：“#fff”，字体大小：“12px”，字体重量：“粗体”，背景：“#3a3d56”，边框半径：“10px”，边框：“无”，填充：“4px10px”};varlabel=newqq.maps.Label({//如果为true，表示可点击，默认为trueclickable:true,//标签的文字内容：item.name||"22",//显示标签的地图map:this.map,offset:newqq.maps.Size(-25,-40),position:newqq.maps.LatLng(item.latitude,item.longtitde),style:cssC,可见:true,zIndex:1000});},5.图片手势放大缩小6.Vue语法的组件导入方式7.打包8.nginx部署uniapp代码发布后，选择服务器，配置nginx，配置https域名
