First published in my Jane book
preface
I have put all the code on Github – wechatapp-run. You can download it to have a look or save it to star first. I will make some optimization updates in the future. Now it is just a learning Demo, we communicate and learn, the actual application needs more optimization.
The body of the
First, preparation
1, register a small program account, use a not registered public mailbox registration. 2, the registration process needs a lot of certification, there are a lot of certification, more cumbersome, if the temporary development test, no questioning, release, as long as the completion of the business license number, do not need to complete wechat certification. 3. After registering your account, log in, click Settings in the left list of the main page, and then select Development Settings in the Settings page to see the AppID for logging in to the development tool.
Second, development tools
You can download the development tool from the official website
3. Start the project
Open the developer tools, select the small program option, to reach the Add project page
In this case, setting the AppId of the page is used.
If the file in the project directory is an empty folder, you are prompted to create the Quick Start project. Select “Yes” and developer tools will help us create a simple demo in the development directory. The Demo has a complete outline of the applet.
1, the framework
Take a look at the next table of contents:
App.js: applet logic, life cycle, global variable app.json: applet common Settings, navigation bar color, etc., can not comment app.wxss: applet common style, class CSS.
Applets page composition:
Each applet page is composed of four different files with the same name in the same path, such as index.js, index.wxml, index.wxss, and index.json.
The [path + page name] of each page in wechat applet needs to be written in pages of app.json, and the first page in pages is the home page of the applet.
These four files can be divided into three parts by function:
Configuration: JSON file Logical layer: JS file View layer: wxss.wxml file
On iOS, the javascript code for the applets runs in JavaScriptCore and on Android, the javascript code for the applets is parsed through the X5 kernel on the development tools, The javascript code for the applet runs in NWJS (the Chrome kernel). So there’s a discrepancy between what you see on the development tool and what you see in reality.
2, components,
Wechat provides many components, which are mainly divided into eight types:
View container, base content, form component, action feedback, navigation, media component, map, canvas
Contains view, Scrollview, button, form and other common components, but also provides map map, canvas.
Components belong primarily to the view layer and are laid out structurally through WXML, similar to HTML. Modify styles through WXSS, similar to CSS. Example of component usage syntax:
This is a view with the normal view style modifiedCopy the codeMore information about components and how to use them can be found in the official documentation – Components
3, API
Network media data location device interface development interface
The use of network request must first log in to the public platform small program account, in the setting page, set the domain name allowed access, network request includes ordinary HTTP request, support upload, download, socket. Basically meet our development needs of the network demand.
These apis belong to the logical layer and are written in js files. Example:
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}})Copy the codeYou can go to the official documentation -API to see how to use other apis.
4. Compile and run
1. The emulator can see the effect on the emulator. The effect is different from running on the mobile phone
2, the real machine in the left option bar, select the project, and then click preview will produce a TWO-DIMENSIONAL code, with the administrator wechat signal scan can see the actual effect on the real machine
Practice – Running mini program.
Screenshots of the real machine (running on iPhone7, wechat version: 6.3.30) :
Function:
Calculate mileage, time, and track in real time (somewhat crude)
Ideas:
The acquisition location of wechat applet apiWx.getLocation () and map component Map are mainly used. Firstly, a timer is implemented for timing. Coordinates are obtained by wx.getLocation(), and the obtained coordinates are stored in an array. Mileage is obtained by coordinates every period of time, and the total mileage is obtained by summation. 1. Since there is no way to draw lines on the map at present, the method of sticking a little red dot map on the map is adopted to show the rough running path. 2. Although the Mars coordinate type GCJ02 in API is adopted, the obtained coordinates are almost the same as the international coordinates, and there are still deviations.
Core code:
I have put all the code on Github – wechatapp-run. You can download it to look at it or save it to star first. I will make some optimization updates in the future. Now it is just a learning Demo, we communicate and learn, the actual application needs more optimization.
WXML file layout code:
Open position start running stop running \\n mileage: {{meters}}km \\n\ n time: {{time}}Copy the code
Open position start running stop running \\n mileage: {{meters}}km \\n\ n time: {{time}}Js file logic code:
var countTooGetLocation = 0; var total_micro_second = 0; var starRun = 0; var totalSecond = 0; Var oriMeters = 0.0; */ function count_down(that) {if (starRun == 0) {return; } if (countTooGetLocation >= 100) { var time = date_format(total_micro_second); that.updateTime(time); } if (countTooGetLocation >= 5000) {//1000 is 1s that.getLocation(); countTooGetLocation = 0; } setTimeout setTimeout(function(){ countTooGetLocation += 10; total_micro_second += 10; count_down(that); },10)} // Time format output, such as 03:25:1986. Function date_format(micro_second) {var second = math.floor (micro_second / 1000); Var hr = math.floor (second / 3600); Var min = fill_zero_prefix(math.floor ((second-hr * 3600) / 60)); var min = fill_zero_prefix(math.floor ((second-hr * 3600) / 60)); Var SEC = fill_zero_prefix((second-hr * 3600-min * 60)); // equal to => var sec = second % 60; return hr + ":" + min + ":" + sec + " "; } function getDistance(lat1, lng1, lat2, lng2) { var dis = 0; var radLat1 = toRadians(lat1); var radLat2 = toRadians(lat2); var deltaLat = radLat1 - radLat2; var deltaLng = toRadians(lng1) - toRadians(lng2); var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2))); return dis * 6378137; function toRadians(d) { return d * Math.PI / 180; } } function fill_zero_prefix(num) { return num < 10 ? "0" + num : num } //**************************************************************************************** //**************************************************************************************** Page({ data: { clock: ", isLocation:false, latitude: 0, longitude: 0, markers: [], covers: [], meters: 0.00, time: "0:00:00"}, / / * * * * * * * * * * * * * * * * * * * * * * * * * * * * onLoad: function (options) {/ / page to initialize the options for the page jump parameters from enclosing getLocation () console.log("onLoad") count_down(this); }, //**************************** openLocation:function (){ wx.getLocation({ type: Success: function(res){wx.openLocation({latitude: Res.latitude, // latitude is -90~90 and the negative number means longitude: res.longitude is -180~180 and the negative number means longitude: 28, / / scaling})},}}), / / * * * * * * * * * * * * * * * * * * * * * * * * * * * * starRun: function () {if (starRun = = 1) {return; } starRun = 1; count_down(this); this.getLocation(); }, //**************************** stopRun:function () { starRun = 0; count_down(this); }, //**************************** updateTime:function (time) { var data = this.data; data.time = time; this.data = data; this.setData ({ time : time, }) }, //**************************** getLocation:function () { var that = this wx.getLocation({ type: 'gcj02', // by default, wgs84 returns GPS coordinates, gcj02 returns coordinates available for wx.openLocation success: function(res){ console.log("res----------") console.log(res) //make datas var newCover = { latitude: res.latitude, longitude: res.longitude, iconPath: '/resources/redPoint.png', }; var oriCovers = that.data.covers; console.log("oriMeters----------") console.log(oriMeters); var len = oriCovers.length; var lastCover; if (len == 0) { oriCovers.push(newCover); } len = oriCovers.length; var lastCover = oriCovers[len-1]; console.log("oriCovers----------") console.log(oriCovers,len); var newMeters = getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000; If (newMeters < 0.0015){newMeters = 0.0; } oriMeters = oriMeters + newMeters; console.log("newMeters----------") console.log(newMeters); var meters = new Number(oriMeters); var showMeters = meters.toFixed(2); oriCovers.push(newCover); that.setData({ latitude: res.latitude, longitude: res.longitude, markers: [], covers: oriCovers, meters:showMeters, }); }})}})Copy the codeAfter five, language
This article is a quick start development introduction, details can be seen in the official documentation of my related to all the code on Github – wechatapp-run