百度地标识别快速接入微信小程序全程复现-快科技-科技改变生活

百度地标识别快速接入微信小程序全程复现

安妮
2019年07月24日 16:03
0

作者:宗潇帅

前期准备

百度地标识别快速接入微信小程序全程复现

创建应用获取相关信息

应用名称

名字方便自己区分应用使用即可,注意查看是否勾选地标识别

应用描述

简述一下应用场景即可

获取应用相关信息

AppID、API Key、Secret Key三个值保存备用。最后一值不要随便泄露哦。

注册微信小程序

选择微信小程序填写信息激活即可(开发者们注册个人即可)

开始码起来

百度地标识别快速接入微信小程序全程复现

快速获取access_token

将API_KEY、SERCET_KEY替换为获取应用相关信息中的值,在任意浏览器地址栏输入并点击回车键

百度地标识别快速接入微信小程序全程复现

创建一个小程序项目

获取小程序appid

开发-开发设置-开发者ID-AppID(小程序ID)

创建项目

开始改造项目

新建landmark文件夹

给页面增加功能

百度地标识别快速接入微信小程序全程复现

加完页面内容,再增加一些样式。代码&效果如下

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

封装一个工具方法

方便调用地标识别接口而封装一个工具方法。后续可以根据自己需求再次增加额外接口。这样不会影响具体某个模块功能更改代码。放在util/baiduai.js

使用之前记得 accessToken 替换为前面获取保存的access_token哦

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

给按钮增加事件并完善功能

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

百度地标识别快速接入微信小程序全程复现

完善功能后的结果截图

最终的wxml代码

百度地标识别快速接入微信小程序全程复现

好文点赞
水文反对

此文章为快科技原创文章，快科技网站保留文章图片及文字内容版权，如需转载此文章请注明出处：快科技

观点发布网站评论、账号管理说明

热门评论

{for c in All}
         <div class="pluninfo"> 
      
      <div class="pluninfo_head" style="height:auto;">
        <div class="pface">
              {if (c.UserName=="") ||(c.UserName=="guest")} 
              <a href="javascript:;"><img src="//11.mydrivers.com/m/images/v1/qianshui.jpg"></a> 
             {else}
              <a href="javascript:;" onclick="userCommentInfo(${c.UserID});"><img src="//passport.mydrivers.com/comments/getusertouxiang.aspx?uid=${c.UserID}&size=medium"></a> 
              {if (c.UserID== 1269476)} <span class="zuozhe">作者</span>{else}
            <span class="jibie">${c.userlevel}</span> {/if}
          {/if}
       </div>
        <div class="plcenter">
          <div class="pluninfo_top1"> <span class="username {if (c.usersex == 2)} girl{else} boy{/if}">  {if (c.UserName=="")||(c.UserName=="guest")} ${c.AUserName}{else}${c.UserName}{/if}</span> 
                 {if (c.Cfrom!="" && c.Cfrom != "mobile")}<span onclick="downapp_float();" title="下载驱家新闻客户端，展示小尾巴" class="span_from dev ${c.Cfrom}">${c.model}</span>{else}<span class="span_from dev {if (c.model!= "手机用户" && c.model!="")} browser{else} ${c.Cfrom}{/if}">{if (c.model!= "手机用户" && c.model!="")}<img src="${c.bwimg}">{/if}${c.model}</span>{/if}   
                </div>
          <div class="pluninfo_top2"><span>${c.IPAdd}</span><span>${c.PostDate}</span></div>
        </div>
        <div class="plright"><img src="//11.mydrivers.com/m/images/v1/plun_moreinfo.svg" alt=""/> 
          <div class="pedite_img" style="display: none;"><img src="//11.mydrivers.com/m/images/v1/triangle-up.svg" alt=""/></div>
          <div class="pedite" style="display: none;">
            <ul>
              <li><a href="javascript:;" onclick="ShowMyReply(${c.ID})" class="huifu">回复</a></li>
              <li> <a href="javascript:;" onclick="userReport(${c.ID},${c.TitleID})" class="jubao">举报</a></li>
              <li><a href="javascript:;" class="taoyan">讨厌</a></li>
              <li> <a href="javascript:;" class="dels">删除</a></li>
            </ul>
          </div> 
        </div>
      </div>
      <div style="clear:both"></div>
       
      
      <div class="pluninfo_center">${c.Content}
           {if (c.RevertContent!="")}
          	  <div class="yinyong">
        <div class=" plunxx_center1">
        <span class="username {if (c.usersex == 2)} girl{else} boy{/if}">{if (c.RevertUserName=="")} ${c.RevertAUserName}{else}${c.RevertUserName}{/if}的原贴：</span>
             ${c.RevertContent}
        </div> 
		  </div>
           {/if}
      </div>
       
      
      <div class="pluninfo_bottom">
        <div class="fayan">
          <ul>
            <li><a href="javascript:;" id="s_${c.ID}"  onclick="sndReq(${c.TitleID},${c.ID},'support',${c.Support})" class="zhichi">支持[${c.Support}]</a></li>
            <li><a href="javascript:;" id="o_${c.ID}"  onclick="sndReq(${c.TitleID},${c.ID},'oppose',${c.Oppose})" class="fandui">反对[${c.Oppose}]</a></li>
            <li onclick="ShowMyReply(${c.ID})">回复</li>
          </ul>
        </div>
      </div>
       
      
      
      <div class="div_huifu" id="div_reply_${c.ID}"></div>
      <div style="clear:both"></div>
       
    </div>
   {/for}

查看全部评论

相关报道

邮件订阅

0 | 0| 0 | 0