2727551894

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
统计
 

【微信开发】 前端

 1. jssdk -     <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

 2. 验证 js 是否能用

复制代码
 wx.config({
            debug: false,
            appId: '',
            timestamp: '',
            nonceStr: '',
            signature: '',
            jsApiList: [需要验证的 js 函数]
        });

        wx.ready(function () {
           // 验证通过后调用
        });

        wx.error(function (res) {
       // 验证失败后调用
       alert(JSON.stringify(res));         
        });
复制代码

3. 选择图片

1
2
3
4
5
6
7
8
9
10
function chooseImage() {
           wx.chooseImage({
               count: 9,
               sizeType: ['original', 'compressed'],
               sourceType: ['album', 'camera'],
               success: function (res) {
                   uploadImage(res.localIds, 0);
               }
           });
       }

4. 上传图片,多张图片得传完一张后再传下一张,上传成功后会返回图片id,用于将图片下载到服务器

复制代码
  function uploadImage(localIds, index) {
            if (localIds.length == 0 || index >= localIds.length) {
                return;
            }
            var id = localIds[index];
            wx.uploadImage({
                localId: id.replace("wxlocalresource", "wxLocalResource"),  // ios得做转换
                success: function (res) {
                    index++;
                    uploadImage(localIds, index)
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        }
复制代码

5. 获取位置(微信接口)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var positionPoint;
function getPosition() {
           wx.getLocation({
               type: 'gcj02',
               success: function (res) {
                   positionPoint.latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                   positionPoint.longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                   positionPoint.accuracy = res.accuracy; // 位置精度
               },
               fail: function (res) {
                   alert("无法获取当前位置,请打开“定位服务”来允许“微信”确定您的位置");
               }
           });
       }

6. 打开地图(微信接口)

复制代码
    function openLocation() {
            wx.openLocation({
                latitude: positionPoint.latitude, // 纬度,浮点数,范围为90 ~ -90
                longitude: positionPoint.longitude, // 经度,浮点数,范围为180 ~ -180。
                name: '', // 位置名
                address: '', // 地址详情说明
                scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
                infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
                fail: function (res) {
                    alert(JSON.stringify(res))
                }
            });
        }
复制代码

7. 获取位置(html5接口)

function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition,showError);
            }
            else { alert("无法获取当前位置"); }
        }

8. 打开地图(腾讯地图)

复制代码
       function showPosition(position) {
            if (typeof (position) == "undefined" || typeof (position.coords) == "undefined") {
                alert("无法获取当前位置");
                return;
            }
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            qq.maps.convertor.translate(new qq.maps.LatLng(lat, lng), 1, function (res) {
                latlng = res[0];
                var map = new qq.maps.Map(document.getElementById("allmap"), {
                    center: latlng,
                    zoom: 13
                });
                var marker = new qq.maps.Marker({
                    map: map,
                    position: latlng
                });
            });
        }
复制代码

 

  

  

 

posted on   xmj112288  阅读(391)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
 
点击右上角即可分享
微信分享提示