共计 5897 个字符，预计需要花费 15 分钟才能阅读完成。
微信小程序开发内嵌 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 的域名配置
三、h5 和 webview 通信
正文完