8
微信小程序开发内嵌h5开发心得
source link: https://segmentfault.com/a/1190000040005368
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
微信小程序开发内嵌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通信
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK