2、 logs- > main = mils叵 utiljsSappJs 刁叩p.jwn白 pp.sssqtTk*w'项目结构文件结构很简单-pages文件夹里面放所有页面的内容，在小程序的开发中，是将每个页面的内容（包括布局 页面.wxml,样式文件.wxss,配置文件json文件）单独的放在统一的文件夹内！-utils文件夹里面存放通用的js文件,J2ee的小伙伴应该对它很熟悉！-app.js文件,也是项目的入口文件，在这里小程序会开始他的生命周期！-app.js on文件是配置项目的加载文件和相关组件，项目在加载的时候首先会在这个文件里面查找它所要加载的组件，因此,它至关重要！

3、-app.wxss 文件，存放所有通用的样式文件！小提醒:1, 想必你也已经看出来了，wxml其实就是我们熟的不能载熟的html文件,wxs s就是css文件！2, app json文件中的配置项中,不能写注释（没搞清楚为什么会这样!）!3, app .json 中windows选项（也就是页面的头部信息）配置好后,所有页面都会显示这个名称，更改的方法是在需要更改头部信息的页面添加.json 文件,重 命名 navigationBarTitleText的值地图定位实例好了，说了这么多口都干了 ，还是不啰嗦了，直接上咱们的小demo吧! 配置app.json文件所要加载的页面/app.js on

4、"pages":"pages/i ndex/i ndex","win dow" :"backgroundTextStyle": "light" ,"navigationBarBackgroundColor": "#10DDC2","navigationBarTitleText": "Appjs 全局名称",需要注意的是：* pages 配置路径的时候,不要写注释！* "navigationBarTitleT

5、ext": "Appjs 全局名称",是定义的全局名称，局部页面更高的方法在上面我已经提到过了！（什么？没看见？诺!就是在具体要更改的界面增加json文件,重定义naviga tio nBarTitleText的值啦）!* "navigationBarBackgroundColor": "#10DDC2",指头部背景颜色，可自行更改！配置好加载的页面和基本的头部信息后我们打开pages/index/index.wxml文件，来搭建界面的基本布局！

6、apper">经度 经度 value =" loc纬度 <

8、/ text >位置名称

9、uot; value =" 总部基地二区" name"name" >详细位置 &l

10、t;/ view >vbutt on class ="page-body-butt on"Locatio n"> 获取位置 type ="primary"bin dtap ="get 查看位置 type ="primary

11、"formType ="su然后再根据我们的需要，在index.wxss文件里面写入基本的样式/* in dex.wxss*/.wrapper height:100%;backgro und:#fff ;.page-body-form-valuefont-size:14px ;color: darkturquoise ;fon t-weight:bold ;padding-left:15px ;border: 1px soli

12、d rgb(72, 165, 131);border-radius:4px ;height:30px ;line-height:30px ;.page-body-form-keyfont-size:14px ;padding:10px ;margin-top:15px ;font-family:"Microsoft Yahei"font-weight:bold ;height: 30px ;line-height:30px ;.page-body-button margin-top: 20px ;line-height: 2;js 中动态夺,我将在后面界面搭建完成 ,在 i

13、ndex.wxml 界面中 ,经纬度的获取我们采用 双向绑定 的机制从取（是不是想到了 AngularJS 和 vuejs 呢 ）,这又涉及到小程序的加载机制的问题的文章具体阐述 ,现在我们先忽略这些 ,本次重在走一遍流程实现效果为主打了这么久，还是先看看效果，点击左侧的调试按钮，刷新看到如下效果iPnonesLit 南帕堆 Souite NptwOf* $toig ApOatA gE0 盲 top豊 lJ Pra-s-ve logF5lh3査 trli<在index.wxml中,我们给表单中的经度和纬度输入框双向绑定经纬度的指，并给第一个按钮绑定了获取经纬度值的事件，当点击获取位置的按

14、钮，就可以通过微信提供的接口获取我们想 要的值，同时，我们也可以自己输入经纬度进行查询位置.因此,接下来我们写获取地理位置的方法，打开index.js，输入以下代码：/in dex.js /获取应用实例var app = getApp()Page(data: / 默认未获取地址hasLocation: false,/ 获取经纬度getLocation: function (e) console.log(e) var that = this wx.getLocation( success: function ( res ) console.log( res ) that.setData( has

15、Location: true , location: longitude: res.longitude, latitude: res.latitude),/ 根据经纬度在地图上显示openLocation: function ( e ) var value = e.detail.valuewx.ope nLocati on( Ion gitude:Number ( valueon gitude ),latitude:Number ( value.latitude )在index.js中我首先定义了页面加载的时候hasLocation:false,也就是默认不加载地理位置当点击获取地理位置的时候

16、，通过getLocation方法获取到当前的经纬度位置，并将他以对象的形式返回回去，这样,在前端界面的in put输入框中 通过locati ono ngitude和Cl Xipp P"ip B：iFsdpn-祜叭,ww睥 ¥ indF.pi 勺c | - - 3 时* .Mml - > ivlJi c Li s i s-»T-jpt*r J<*lehi tl*&&a-p

17、* £l£dM±Nlt«,lcper>iljaciatl!ttl">"»af« 0*擂肝11!|tfldFK.WtSE- rnailii嘗节ar弃讷壬帀丟超输占伍CtJNIt 匚lftfc5=*|W 60的-fhl“即“鬥呷诚 e 1-hj*'pt?-1B typTiect-aat tlasEiJp韦口- bcidy-fcra- kay"襌疋ftaxB l«i(iLrl. t尊-!："*. ty«-*'t*iC:1V41u«-"

18、'tluC#tlQh. Idtll'Ud*)" nJM>ar lAtltwd4"- Bl uli k二PP庐匕 WJMHX”t.*各:Kb Jy fr- X "唱匿吿梅UnputFor 州I"- tpi« .<*5"7lluE' h*t«"M«">

19、quot;山1-°：甌1亡斜tn产叩萍+哥和V侗f £ 广山典応”elm-bod/ -butifiM.* >button il辭犷 切半卡1»4门广 li>ntUp = pMLglt伽TififlM皿“WEMA fhiMnrii cliBi»v|N|!it-M-Wtt4n* Estw.piiwir11 fyrMTiffl.itwRwb*dt' >WW5B< /Wktan* 好刈尿>J2JI fAvlw t/vieki!-£ tri # a在调试中，我们点击获取地址按钮，得到我们想要的结果" 吟D ? O'f O ：i年 I r»eJT5*< J3432$ -Jv£fi«；J41 fir *11址口亡仙丄得到地理位置后，我们就可以将这些数据发送给微信的打开地图的接口，以此来在地图中展示位置信息，给form 表单绑定open