微信小程序开发内嵌h5开发心得
西安小哥 -
（1）小程序app申请 微信公众平台地址；基本就是对着腾讯要求进行填写审核
(2)选择微信appid。开发管理选择->开发设置
(3)下载微信开发者根据自己系统情况下载即可
修改微信小程序名称以及界面配置
index.wxml。template部分代码
<view wx:if="{{isHide}}">
<view wx:if="{{canIUse}}" >
<view class='header'>
<!-- <image src='/images/wx_login.png'></image> -->
<icon 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、代码上传部署
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的域名配置
特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。
上一篇： 微信小程序面试总结
下一篇： 微信小程序遇到的坑
Tags 标签
html5微信小程序扩展阅读
HTML5离线存储
2020-03-06 14:13:06 []在解决php5 Excel文件读取时的收获
2021-01-01 22:56:28 []微信小程序 BLE 蓝牙封装
2021-07-28 06:14:16 [亦然]微信开发中 openID 与 unionID 的区别
2021-07-28 16:00:52 [前端熟练工]你猜这是小程序还是webapp跳转？--小程序Webview与Webapp交互传参
2021-07-28 15:59:38 [王小o]图形框架clunch如何实现跨端开发（uniapp+微信小程序）
2021-07-28 13:24:03 [你好2007]微信小程序video播放
2021-07-29 05:51:36 [zm_star]小程序最佳实践——自定义导航栏（一）
2021-07-28 16:20:32 [mmcai]微信小程序自定义返回页面遇到的问题
2021-07-28 23:45:49 [Lingo]加个好友，技术交流
