用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    880

    主题

    2069

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2016-11-30 15:55:35 zhichi_admin 管理员 楼主 103907
    BY:伯乐在线 - 王小树


    一、准备工作

    1、注册一个小程序账号,得用一个没注册过公众号的邮箱注册。
    2、注册过程中需要很多认证,有很多认证,比较繁琐,如果暂时只是开发测试,不进行提审、发布的话,只要完成营业执照号填写就可以了,不需要完成微信认证。
    3、注册完账号,登录,在主页面左边列表中点击设置,然后再设置页面中选开发设置就可以看到AppID,用于登录开发工具。


    主页面


    设置页面

    二、开发工具

    可以到官网下载


    开发工具


    开发工具编辑页面

    三、开始项目

    打开开发者工具,选择小程序选项,到达添加项目页面


    添加项目

    这个时候在前面设置页面的AppId就用到了。

    如果项目目录中的文件是个空文件夹,会提示是否创建quick start 项目。
    选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。
    这个Demo拥有一个完整的小程序的大概框架。

    1、框架

    先看下一目录:


    文件目录.png

    app.js: 小程序逻辑,生命周期,,全局变量
    app.json: 小程序公共设置,导航栏颜色等,不可以注释
    app.wxss :小程序公共样式,类CSS 。

    小程序页面构成:


    页面构成

    每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。


    葛文佳介绍

    微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。


    路径

    这四个文件按照功能可以分成三个部分:

    配置:json 文件
    逻辑层:js文件
    视图层:wxss.wxml文件

    在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中
    在 Android 上,小程序的 javascript 代码是通过 X5 内核来解析
    在 开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome内核) 中。所以开发工具上的效果跟实际效果有所出入。

    2、组件

    微信提供了许多组件,主要分为八种:

    视图容器、
    基础内容、
    表单组件、
    操作反馈、
    导航、
    媒体组件、
    地图、
    画布

    包含view、scroll-view、button、form等普通常用的组件,也提供了地图map、画布canvas。

    组件主要属于视图层,通过wxml来进行结构布局,类似于html。通过wxss修改样式,类似于css。
    组件使用语法实例:

    <!--普通视图-->
    <view>这是一个普通视图</view>

    <!--wxss样式修改-->
    <view clas="mainView">样式修改过的视图</view>

    更多的组件以及相关使用方法可以到官方文档-组件查看

    3、API

    网络
    媒体
    数据
    位置
    设备
    界面
    开发接口

    其中网络请求的使用必须先到公众平台登录小程序账号,在设置页面那里,设置允许访问的域名,网络请求包含了普通的http请求、支持上传、下载、socket。基本上满足了我们开发中所需要的网络需求。

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

    1. wx.getLocation({
    2.    type: 'wgs84',
    3.    success: function(res) {
    4.        var latitude = res.latitude
    5.        var longitude = res.longitude
    6.        var speed = res.speed
    7.        var accuracy = res.accuracy
    8. }})
    复制代码


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

    4、编译运行

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


    模拟器.png

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


    Paste_Image.png

    实践–跑步小程序。

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


    home.jpeg


    run.jpeg


    slideback.jpeg


    slide.jpeg

    功能:

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

    思路:

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

    核心代码:

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

    wxml文件布局代码:

    1. <view class="head" style="flex-direction:row;">
    2.     <image class="icon" src="/resources/joyrun.png" mode="aspectFill"/>
    3.     <button bindtap="openLocation">打开位置</button>
    4.     <button bindtap="starRun">开始跑步</button>
    5.     <button bindtap="stopRun">暂停跑步</button>
    6.     <text>\n里程数:{{meters}}km</text>
    7.     <text>\n\n时间:{{time}}</text>
    8. </view>
    9. <view class="mainView">
    10.    <map
    11.         class="mapView"
    12.         style="width: 100%; height: 375px;"
    13.         latitude="{{latitude}}"
    14.         longitude="{{longitude}}"
    15.         markers="{{markers}}"
    16.         covers="{{covers}}"
    17.         >
    18.     </map>
    19. </view>
    复制代码


    js文件逻辑代码:

    1. var countTooGetLocation = 0;
    2. var total_micro_second = 0;
    3. var starRun = 0;
    4. var totalSecond  = 0;
    5. var oriMeters = 0.0;
    6. /* 毫秒级倒计时 */
    7. function count_down(that) {
    8.     if (starRun == 0) {
    9.       return;
    10.     }
    11.     if (countTooGetLocation >= 100) {
    12.       var time = date_format(total_micro_second);
    13.       that.updateTime(time);
    14.     }
    15.       if (countTooGetLocation >= 5000) { //1000为1s
    16.         that.getLocation();
    17.         countTooGetLocation = 0;
    18.       }   
    19. setTimeout
    20.       setTimeout(function(){
    21.         countTooGetLocation += 10;
    22.     total_micro_second += 10;
    23.         count_down(that);
    24.     }
    25.     ,10
    26.     )
    27. }
    28. // 时间格式化输出,如03:25:19 86。每10ms都会调用一次
    29. function date_format(micro_second) {
    30.       // 秒数
    31.       var second = Math.floor(micro_second / 1000);
    32.       // 小时位
    33.       var hr = Math.floor(second / 3600);
    34.       // 分钟位
    35.       var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
    36.       // 秒位
    37.     var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
    38.     return hr + ":" + min + ":" + sec + " ";
    39. }
    40. function getDistance(lat1, lng1, lat2, lng2) {
    41.     var dis = 0;
    42.     var radLat1 = toRadians(lat1);
    43.     var radLat2 = toRadians(lat2);
    44.     var deltaLat = radLat1 - radLat2;
    45.     var deltaLng = toRadians(lng1) - toRadians(lng2);
    46.     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)));
    47.     return dis * 6378137;
    48.     function toRadians(d) {  return d * Math.PI / 180;}
    49. }
    50. function fill_zero_prefix(num) {
    51.     return num < 10 ? "0" + num : num
    52. }
    复制代码


    //****************************************************************************************
    //****************************************************************************************

    1. Page({
    2.   data: {
    3.     clock: '',
    4.     isLocation:false,
    5.     latitude: 0,
    6.     longitude: 0,
    7.     markers: [],
    8.     covers: [],
    9.     meters: 0.00,
    10.     time: "0:00:00"
    11.   },
    复制代码

    //****************************
    1.   onLoad:function(options){
    2.     // 页面初始化 options为页面跳转所带来的参数
    3.     this.getLocation()
    4.     console.log("onLoad")
    5.     count_down(this);
    6.   },
    复制代码

      //****************************

    1. openLocation:function (){
    2.     wx.getLocation({
    3.       type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
    4.       success: function(res){
    5.           wx.openLocation({
    6.             latitude: res.latitude, // 纬度,范围为-90~90,负数表示南纬
    7.             longitude: res.longitude, // 经度,范围为-180~180,负数表示西经
    8.             scale: 28, // 缩放比例
    9.           })
    10.       },
    11.     })
    12.   },
    复制代码



    //****************************
    1.   starRun :function () {
    2.     if (starRun == 1) {
    3.       return;
    4.     }
    5.     starRun = 1;
    6.     count_down(this);
    7.     this.getLocation();
    8.   },
    复制代码



    //****************************

    1. stopRun:function () {
    2.     starRun = 0;
    3.     count_down(this);
    4.   },
    复制代码



    //****************************

    1. updateTime:function (time) {
    2.     var data = this.data;
    3.     data.time = time;
    4.     this.data = data;
    5.     this.setData ({
    6.       time : time,
    7.     })
    8.   },
    复制代码



    //****************************

    1. getLocation:function () {
    2.     var that = this
    3.     wx.getLocation({
    4.       type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
    5.       success: function(res){
    6.         console.log("res----------")
    7.         console.log(res)
    8.         //make datas
    9.         var newCover = {
    10.             latitude: res.latitude,
    11.             longitude: res.longitude,
    12.             iconPath: '/resources/redPoint.png',
    13.           };
    14.         var oriCovers = that.data.covers;
    15.         console.log("oriMeters----------")
    16.         console.log(oriMeters);
    17.         var len = oriCovers.length;
    18.         var lastCover;
    19.         if (len == 0) {
    20.           oriCovers.push(newCover);
    21.         }
    22.         len = oriCovers.length;
    23.         var lastCover = oriCovers[len-1];
    24.         console.log("oriCovers----------")
    25.         console.log(oriCovers,len);
    26.         var newMeters = getDistance(lastCover.latitude,lastCover.longitude,res.latitude,res.longitude)/1000;
    27.         if (newMeters < 0.0015){
    28.             newMeters = 0.0;
    29.         }
    30.         oriMeters = oriMeters + newMeters;
    31.         console.log("newMeters----------")
    32.         console.log(newMeters);
    33.         var meters = new Number(oriMeters);
    34.         var showMeters = meters.toFixed(2);
    35.         oriCovers.push(newCover);
    36.         that.setData({
    37.           latitude: res.latitude,
    38.           longitude: res.longitude,
    39.           markers: [],
    40.           covers: oriCovers,
    41.           meters:showMeters,
    42.         });
    43.       },
    44.     })
    45.   }
    46. })
    复制代码


    五、后语

    游客,如果您要查看本帖隐藏内容请回复


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    2016-11-30 16:43:57 zhichi_admin 来自手机 管理员
    沙发
    使用道具 举报 回复
    正需要,支持楼主大人了!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!@@@@@@@@@@@
    2016-12-5 12:02:16 wwww 新人求带
    5#
    正需要,支持楼主大人了!
    6666666666
    我只是路过打酱油的
    啥也不说了,感谢楼主分享哇!
    想到吃软饭vgbhnjk
    99999999999
    12下一页
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略