微信小程序开发内嵌h5开发心得
受敌人委托给某公司开发微信小程序。原本是以原生开发、开发了一半，然而客户要求用h5开发，所以选用uniapp开发框架。之前没有微信小程序得开发教训；根本是对着文档、对着百度一步一步开发过去得，所以有必要总结一下
一、事先筹备
（1）小程序app申请 微信公众平台地址；根本就是对着腾讯要求进行填写审核
(2)抉择微信appid。开发治理抉择->开发设置
(3)下载微信开发者依据本人零碎状况下载即可
二、开发工作
1、小程序开发
- 用微信开发者工具新建我的项目，并输出申请得APPID
- 批改微信小程序名称以及界面配置
- 开发标准和文档参考官网文档
- 之前是用userinfo受权，版本升级后用getUserProfile受权。附上代码
index.wxml。template局部代码
<view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='header'> <!-- <image src='/images/wx_login.png'></image> --> <icon class="icon-box-img" type="waiting" size="93"></icon> </view> <view class='content'> <view>申请获取以下权限</view> <text>取得你的公开信息(昵称，头像等)</text> </view> <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindtap='bindGetUserInfo'> 受权登录 </button> </view> <view wx:else>请降级微信版本</view></view>js代码次要用到getUserProfile、getStorageSync、login语法
var App = getApp()Page({ data: { //判断小程序的API，回调，参数，组件等是否在以后版本可用。 canIUse: false,//是否能够用getUserProfile isHide: false,//判断是否展现受权页面 }, onLoad: function () { var that = this; if (wx.getUserProfile) { this.setData({ canIUse: true }) } var user = wx.getStorageSync('user') || {}; var userInfo = wx.getStorageSync('userInfo') || {}; App.globalData.userInfo = userInfo;//缓存用户信息 App.globalData.userId = user.id;//用户id console.log('缓存的数据', 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 接口，从而获取code // that.login() // } // }); // } else { // // 用户没有受权 // // 扭转 isHide 的值，显示受权页面 // that.setData({ // isHide: true // }); // } // } // }); }, //关上受权界面 bindGetUserInfo: function (e) { // debugger wx.getUserProfile({ desc: '受权登录', // 申明获取用户个人信息后的用处，后续会展现在弹窗中，请审慎填写 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 => { // 获取到用户的 code 之后：res.code console.log("用户的code:" + 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 => { // 获取到用户的 openid console.log("用户的openid:" + res.data.result.id); App.globalData.userId = res.data.result.id; wx.setStorageSync('user', res.data.result); 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、页面title。色彩吧、背景、字体
根本和微信原生语法配置类似
4、配置地图（marker、polyline、定位、层级）采纳的qq地图，事后须要在qqmap中申请开发者的key；而后以script标签的形式引入
代码
initPolyline(map) { //初始化不确定的 this.unSurePolylines.map(item => { let points = item.points.split(";").map(pstr => { return{ latitude:pstr.split(",")[0], longtitde:pstr.split(",")[1] } }); let path = points.map(p => { return new qq.maps.LatLng(p.latitude, p.longtitde) }) let max = this.getMaxLatitude(points); this.initLable({...max,name:item.name}); var polyline = new qq.maps.Polyline({ path: path, strokeColor: '#38E9EB', strokeWeight: 5, name: item.name||"测试线2", strokeDashStyle: "dash", editable: false, map: map }); qq.maps.event.addListener(polyline, 'click', (res) => { alert(res.target.name) }) }) this.surePolylines.map(item => { let points = item.points.split(";").map(pstr => { return{ latitude:pstr.split(",")[0], longtitde:pstr.split(",")[1] } }); let path = points.map(p => { return new qq.maps.LatLng(p.latitude, p.longtitde) }) let max = this.getMaxLatitude(points); this.initLable({...max,name:item.name}); var polyline = new qq.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) }) }) // var path2 = points.map(item => { // return new qq.maps.LatLng(item.latitude, item.longitude) // }) // var path1 = points1.map(item => { // return new qq.maps.LatLng(item.latitude, item.longitude) // }) // var max1 = this.getMaxLatitude(points1); // this.initLable(max); // this.initLable(max1); // var polyline = new qq.maps.Polyline({ // path: path1, // strokeColor: '#38E9EB', // strokeWeight: 5, // name: "测试线2", // editable: false, // map: map // }); // var label1 = this.getMaxLatitude(points); // var polyline1 = new qq.maps.Polyline({ // path: path2, // strokeColor: '#E3C395', // strokeWeight: 5, // editable: false, // strokeDashStyle: "dash", // name: "测试线1", // map: map // }); // qq.maps.event.addListener(map, 'click', function(res) { // // debugger // }); // qq.maps.event.addListener(polyline, 'click', (res) => { // alert(res.target.name) // }) // qq.maps.event.addListener(polyline1, 'click', (res) => { // alert(res.target.name) // }); }, //初始化点位 initMakers(map) { this.areaPoints.map(item => { var latitude = item.center.split(",")[0]; var longtitde = item.center.split(",")[1]; var marker = new qq.maps.Marker({ icon: icon1, map: map, name:item.name, position: new qq.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) { var cssC = { color: "#fff", fontSize: "12px", fontWeight: "bold", background: "#3a3d56", borderRadius: "10px", border: "none", padding: "4px 10px" }; var label = new qq.maps.Label({ //如果为true，示意可点击，默认true。 clickable: true, //标签的文本。 content: item.name || "22", //显示标签的地图。 map: this.map, offset: new qq.maps.Size(-25, -40), position: new qq.maps.LatLng(item.latitude, item.longtitde), style: cssC, visible: true, zIndex: 1000 }); },5、图片手势的放大放大
6、组件引入
vue语法的组件引入形式
7、打包
8、nginx部署
利用uniapp的代码公布之后，抉择服务器，进行nginx配置，并进行https的域名配置