「微信小程序」实现获取当前位置并在地图上显示案例 环境搭建 安装就不说了,一路 next 就好,只是在!安装完成之后,打开工具,用微信扫一扫进行微信验证后就可以看到如下界面啦! 点击添加项目,按照要求填写AP P ID 和项目名称和存储路径,填写好后,点击确定,开发工具就会自动生成项目基本的结构! 项目结构 文件结构很简单 - pages 文件夹里面放所有页面的内容,在小程序的开发中,是将每个页面的内容(包括布局页面.wxml,样式文件.wxss,配置文件json 文件)单独的放在统一的文件夹内! - utils 文件夹里面存放通用的js 文件,J2ee 的小伙伴应该对它很熟悉! - app.js 文件,也是项目的入口文件,在这里小程序会开始他的生命周期! - app.json 文件是配置项目的加载文件和相关组件,项目在加载的时候首先会在这个文件里面查找它所要加载的组件,因此,它至关重要! - app.wxss 文件,存放所有通用的样式文件! 小提醒: 1,想必你也已经看出来了,wxml 其实就是我们熟的不能载熟的html 文件,wxss 就是css 文件! 2,app.json 文件中的配置项中,不能写注释(没搞清楚为什么会这样!)! 3,app.json 中windows 选项(也就是页面的头部信息)配置好后,所有页面都会显示这个名称,更改的方法是在需要更改头部信息的页面添加.json 文件,重命名navigationBarTitleText 的值 地图定位实例 好了,说了这么多口都干了,还是不啰嗦了,直接上咱们的小 demo 吧! 配置app.json 文件所要加载的页面 //app.json { "pages":[ "pages/index/index" ], "window" :{ "backgroundTextStyle":"light" , "navigationBarBackgroundColor": "#10DDC2" , "navigationBarTitleText": "Appjs 全局名称", "navigationBarTextStyle":"white" } } 需要注意的是: * pages 配置路径的时候,不要写注释! * "navigationBarTitleText" : "Appjs 全局名称", 是定义的全局名称,局部页面更高的方法在上面我已经提到过了 ! (什么?没看见 ?诺!就是在具体要更改的界面增加json 文件,重定义navigationBarTitleText 的值啦)! * "navigationBarBackgroundColor": "#10DDC2",指头部背景颜色,可自行更改! 配置好加载的页面和基本的头部信息后,我们打开 pages/index/index.wxml 文件,来搭建界面的基本布局!
