2019 小程序开发笔记

1.小程序使用css动画效果，小程序支持css3属性

操作步骤：使用animation

// 使用方法：1.html中设置
<div></div>

// 2.类选择器选中div，添加属性animation
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

// 3.添加开始数据和结束数据
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name      keyframe 名称
• animation-duration     成动画所花费的时间
• animation-timing-function    动画的速度曲线
• animation-delay    动画开始之前的延迟
• animation-iteration-count   播放的次数
• animation-direction     是否应该轮流反向播放动画

// 备注：css3旋转
from {
    transform-origin:center center;  //旋转原点
    transform: rotate(0deg);   //旋转角度
  }
  to {
    transform-origin:center center; 
    transform: rotate(180deg);
  }

2.弧形效果制作

淘宝思路：添加背景为白色的遮罩的弧形图片

3.页面加载占位效果

淘宝思路：使用div占位，然后在占位div上使用文档分离的办法添加上小的div。

4.小程序调用全剧变量：

进入app.js文件中，在App({}）中定义全剧变量

App({
    globalData: {
        serverUrl: "http://xx.xx.xx.xx:8080/whlyweb",
        imgUrl: "http://xx.xx.xx.xx:8189/downloadFiles",
        noImg: "http://xx.xx.xx.xx:8189/Images/noImg.jpg",
        bimgUrl: "http://xx.xx.xx.xx.187:8189",
    }
})

指定文件中调用：首先，定义一个变量 app=getApp()；然后调用app.globalData.serverUrl。

var app = getApp();
console.log(app.globalData.helloFromApp); // 调用全局变量
app.test(); // 调用全局方法

到此使用全剧变量结束。

 

5.小程序地图坐标装换（百度 转 腾讯）

WGS84、GCJ02、BD09地图坐标系间的坐标转换及坐标距离计算

公式参考地址：http://nightfarmer.github.io/2016/12/01/GPSUtil/

或者：https://blog.csdn.net/sinat_35241409/article/details/78092985?locationNum=9&fps=1&tdsourcetag=s_pcqq_aiomsg

 /**
   * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换算法 将 BD-09 坐标转换成GCJ-02 坐标
   */
  coordinate_converter: function(bd_lat, bd_lon) {
    let pi = 3.1415926535897932384626
    let x = bd_lon - 0.0065
    let y = bd_lat - 0.006
    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
    let gg_lon = z * Math.cos(theta);
    let gg_lat = z * Math.sin(theta);
    return {
      lng: gg_lon,
      lat: gg_lat
    };
    // return new Gps(gg_lat, gg_lon);
  },