Table of Contents
Text
1. Preparation work
Open the developer tools, select the mini program option, and reach the add project page
Look at the next directory first:
WeChat provides many components, mainly divided into eight types:
4、编译运行
实践--跑步小程序。
真机运行截图(运行于iPhone7,微信版本:6.3.30):
功能:
思路:
核心代码:
五、后语
Home WeChat Applet WeChat Development WeChat development: making a running WeChat applet

WeChat development: making a running WeChat applet

May 22, 2017 am 11:18 AM

Preface

I have put all the code on github-weChatApp-Run, you can download it to have a look or star it first. I There will be some optimizationupdate in the future. Now it is just a learning demo, everyone communicates and learns, and the actual application needs more optimization.

Text

1. Preparation work

1. To register a mini program account, you must use an email address that has not registered a public account.
2. The registration process requires a lot of certifications. There are many certifications, which are relatively cumbersome. If it is just development and testing for the time being, without review or release, you only need to fill in the business license number. There is no need to complete WeChat certification.
3. After registering the account, log in, click Settings in the list on the left side of the main page, and then select Development Settings on the settings page to see AppID, which is used to log in to the development tool.

WeChat development: making a running WeChat applet

Main page

WeChat development: making a running WeChat applet

##Setting page

2. Development tools

You can download the development tools from the official website

WeChat development: making a running WeChat applet

Development tools

WeChat development: making a running WeChat applet
# #Development tool editing page

3. Start the project

Open the developer tools, select the mini program option, and reach the add project page


WeChat development: making a running WeChat applet
Add item

At this time, the

AppId
on the previous setting page is used. If the file in the project directory is an empty folder, you will be prompted whether to create a quick start project.

Select "Yes", the developer tools will help us generate a simple demo in the development directory.

This Demo has the general framework of a complete small program.

1. Framework

Look at the next directory first:


WeChat development: making a running WeChat applet
File directory.png

app.js: Mini program logic, life cycle, global variables

app.json: Mini program public settings, navigation bar color, etc., cannot be commented

app.wxss: Mini program public style, CSS-like .

Mini program page composition:

WeChat development: making a running WeChat applet
Page composition

Each mini program page is composed of four files with the same name under the same path The composition of files with different suffixes, such as: index.js, index.wxml, index.wxss, index.json.

WeChat development: making a running WeChat applet
Ge Wenjia’s introduction

The [path + page name] of each page in the WeChat applet needs to be written in the pages of app.json , and the first page in pages is the homepage of the mini program.

WeChat development: making a running WeChat applet
Path

These four files can be divided into three parts according to their functions:

Configuration: json file
Logic layer: js file


View layer
: wxss.wxml file

On iOS, the
javascript

code of the applet is run In JavaScriptCoreOn Android
, the javascript code of the mini program is parsed through the X5 kernelOn the development tool, the javascript code of the mini program is run on nwjs (chr
ome kernel) in. Therefore, the effects on the development tools are different from the actual effects. 2. Components

WeChat provides many components, mainly divided into eight types:

View container,
Basic content,

Form component ,
Operation feedback,
Navigation,
Media component,
Map,
Canvas

Includes commonly used ones such as view, scroll-view, button, form, etc. Components also provide map

map<a href="http://www.php.cn/code/8210.html" target="_blank"> and canvas</a>canvas<a href="http://www.php.cn/code/7892.html" target="_blank">. </a><p>组件主要属于视图层,通过wxml来进行结构布局,类似于html。通过wxss修改样式,类似于css。<br>组件使用语法实例:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!--普通视图--&gt; &lt;view&gt;这是一个普通视图&lt;/view&gt; &lt;!--wxss样式修改--&gt; &lt;view clas=&quot;mainView&quot;&gt;样式修改过的视图&lt;/view&gt;</pre><div class="contentsignin">Copy after login</div></div> <p>更多的组件以及相关使用方法可以到官方文档-组件查看</p> <h5>3、<a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">API</a> </h5> <blockquote><p>网络<br>媒体<br>数据<br>位置<br>设备<br>界面<br>开发接口</p></blockquote> <p>其中<code>网络请求的使用必须先到公众平台登录小程序账号,在设置页面那里,设置允许访问的域名,网络请求包含了普通的http请求、支持上传、下载、socket。基本上满足了我们开发中所需要的网络需求。

这些API属于逻辑层,写在js文件中,
使用实例:

wx.getLocation({
   type: &#39;wgs84&#39;,
   success: function(res) {
       var latitude = res.latitude 
       var longitude = res.longitude 
       var speed = res.speed 
       var accuracy = res.accuracy 
}})
Copy after login

可以到官方文档-API查看其它API的使用方法。

4、编译运行

1、模拟器
可以在模拟器上看效果,上面降到了运行底层不同,效果跟在手机上运行有些差异

WeChat development: making a running WeChat applet

模拟器.png

2、真机
在左边的选项栏中,选择项目,然后点预览会生产一个二维码,用管理员微信号扫一扫就可以在真机上看实际效果

WeChat development: making a running WeChat applet

Paste_Image.png

实践--跑步小程序。

真机运行截图(运行于iPhone7,微信版本:6.3.30):

WeChat development: making a running WeChat applet

home.jpeg

WeChat development: making a running WeChat applet

run.jpeg

WeChat development: making a running WeChat applet

slideback.jpeg

WeChat development: making a running WeChat applet

slide.jpeg

功能:

能够计算里程、时间、实时获取跑步路径(有些粗糙)

思路:

主要使用了微信小程序的获取位置APIwx.getLocation()和地图组件map
首先实现一个计时器进行 计时,通过wx.getLocation()获取坐标,把获取到的坐标存在一个数组中,通过坐标每隔一段时间获取里程,进行累加得到总里程,同时也通过坐标点进行连线
存在的问题:
1、因为目前找不到在地图上画连线的方法,所以采用了在地图上贴小红点图的方法显示大概跑步路径,路径比较粗糙。
2、虽然采用了API里面的火星坐标gcj02类型,但是获取的坐标跟国际坐标差不多,依然存在着偏差。

核心代码:

我把全部代码放在github上-weChatApp-Run,可以下载来看看或者先star收藏,我以后还会进行一些优化更新。现在只是一个学习Demo,大家沟通学习,实际应用还需更多优化。

wxml文件布局代码:

<view class="head" style="flex-direction:row;">
    <image class="icon" src="/resources/joyrun.png" mode="aspectFill"/>
    <button bindtap="openLocation">打开位置</button>
    <button bindtap="starRun">开始跑步</button>
    <button bindtap="stopRun">暂停跑步</button>
    <text>\\n里程数:{{meters}}km</text>
    <text>\\n\\n时间:{{time}}</text>
</view>

<view class="mainView">
   <map
        class="mapView"
        style="width: 100%; height: 375px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        covers="{{covers}}"
        >
    </map>

</view>
Copy after login

js文件逻辑代码:

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为1s
        that.getLocation();
        countTooGetLocation = 0;
      }   


 setTimeout
      setTimeout(function(){
        countTooGetLocation += 10;
    total_micro_second += 10;
        count_down(that);
    }
    ,10
    )
}


// 时间格式化输出,如03:25:19 86。每10ms都会调用一次
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 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: &#39;&#39;,
    isLocation:false,
    latitude: 0,
    longitude: 0,
    markers: [],
    covers: [],
    meters: 0.00,
    time: "0:00:00"
  },

//****************************
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.getLocation()
    console.log("onLoad")
    count_down(this);
  },
  //****************************
  openLocation:function (){
    wx.getLocation({
      type: &#39;gcj02&#39;, // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res){
          wx.openLocation({
            latitude: res.latitude, // 纬度,范围为-90~90,负数表示南纬
            longitude: res.longitude, // 经度,范围为-180~180,负数表示西经
            scale: 28, // 缩放比例
          })
      },
    })
  },


//****************************
  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: &#39;gcj02&#39;, // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res){
        console.log("res----------")
        console.log(res)

        //make datas 
        var newCover = {
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: &#39;/resources/redPoint.png&#39;,
          };
        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 after login

五、后语

本文是一个快速上手开发的介绍,细节介绍可以查看官方文档

【相关推荐】

1. 微信公众号平台源码下载

2. 小猪cms(PigCms)微电商系统运营版(独立微店商城+三级分销系统)

3. 微信人脉王v3.4.5高级商业版 微信魔方源码

The above is the detailed content of WeChat development: making a running WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Develop WeChat applet using Python Develop WeChat applet using Python Jun 17, 2023 pm 06:34 PM

With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine

Implement card flipping effects in WeChat mini programs Implement card flipping effects in WeChat mini programs Nov 21, 2023 am 10:55 AM

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: &lt;!--index.wxml--&gt;&l

Can small programs use react? Can small programs use react? Dec 29, 2022 am 11:06 AM

Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.

Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Oct 31, 2023 pm 09:25 PM

According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling

How uniapp achieves rapid conversion between mini programs and H5 How uniapp achieves rapid conversion between mini programs and H5 Oct 20, 2023 pm 02:12 PM

How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia

Tutorial on writing a simple chat program in Python Tutorial on writing a simple chat program in Python May 08, 2023 pm 06:37 PM

Implementation idea: Establishing the server side of thread, so as to process the various functions of the chat room. The establishment of the x02 client is much simpler than the server. The function of the client is only to send and receive messages, and to enter specific characters according to specific rules. To achieve the use of different functions, therefore, on the client side, you only need to use two threads, one is dedicated to receiving messages, and the other is dedicated to sending messages. As for why not use one, that is because, only

Teach you how to use public account template messages in mini programs (with detailed ideas) Teach you how to use public account template messages in mini programs (with detailed ideas) Nov 04, 2022 pm 04:53 PM

This article brings you some related issues about WeChat mini programs. It mainly introduces how to use official account template messages in mini programs. Let’s take a look at them together. I hope it will be helpful to everyone.

Geographical positioning and map display using PHP and mini-programs Geographical positioning and map display using PHP and mini-programs Jul 04, 2023 pm 04:01 PM

Geolocation positioning and map display of PHP and mini programs Geolocation positioning and map display have become one of the necessary functions in modern technology. With the popularity of mobile devices, people's demand for positioning and map display is also increasing. During the development process, PHP and applets are two common technology choices. This article will introduce you to the implementation method of geographical location positioning and map display in PHP and mini programs, and attach corresponding code examples. 1. Geolocation in PHP In PHP, we can use third-party geolocation

See all articles