WeChat applet development embedded h5 development experience
Entrusted by a friend to develop a WeChat applet to a company. Originally half of the original development and development, but the customer asked to use h5 development, so choose the uniapp development framework. There is no WeChat applet development experience before; basically it is developed step by step against the document and against Baidu, so it is necessary to summarize
1. Preparation beforehand
(1) Mini program app application WeChat public platform address ; basically it is to fill in and review the Tencent requirements
(2) Select WeChat appid. Development Management Selection -> Development Settings
(3) Download WeChat developers can download
2. Development work
1. Mini program development
- Use the WeChat developer tool to create a new project and enter the applied APPID
- Modify the WeChat applet name and interface configuration
- Development specifications and documents refer to official documents
- Previously, it was authorized by userinfo, and after the version was upgraded, it was authorized by getUserProfile. Attach code
index.wxml. template part of the code
<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>
The js code mainly uses getUserProfile, getStorageSync, login syntax
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. Component development and reference
(1) The reference in the external component introduction project is vant-ui
Download and install to the designated location
(2) Development component
(3) Components use
(4) For the development grammar, please refer to the vue development idea data transmission, monitoring, event sending, event monitoring
6. How does webview communicate (pass through parameters)
7. How to introduce the plug-in (simultaneous interpretation)
8. Code upload and deployment
2. h5 development
1. Download the h-builder development tool
2. Initialize the project
The development of h5 and other interfaces is to use #if method condition processing
3. configures the h5 interface, mainly about the configuration of the interface, such as tabar, topbar, and page title. Color bar, background, font
Basic and similar to WeChat native syntax configuration
4. configuration map (marker, polyline, positioning, level), you need to apply for the developer's key in qqmap in advance; then in the way of script tags
Code
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. Zoom in and zoom out of picture gestures
6. Component introduction
How to introduce components of vue syntax
7, package
8, nginx deployment
After the code of uniapp is released, select the server, configure nginx, and configure the domain name of https
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。