最近朋友圈被微信小程序刷屏了，到处都是，作为一个喜欢尝试新鲜事物的前端开发者，肯定不会轻易放弃这么好的尝试机会，所以先把环境搭好静下心来吧！

环境搭建

地球人都知道，微信官方小程序内测版只给了200个测试名额，作为众多人中的一员，我没被列入其中一点都不意外，为此，我还是要给个大大的表情！！！

尽管如此，我还是找到了这个工具。没时间解释太多，就上车走人吧！这里我提供一个优化的工具（你懂的），有兴趣的可以上车试试！微信开发者工具下载领取密码：4xr9

安装就不说了，一路Next就好，安装完成后打开工具，用微信扫一扫进行微信验证，就可以看到下面的界面了！

点击添加项目，按要求填写项目名称和存放路径，填写完成后点击确定，开发工具就会自动生成项目的基本结构！

项目结构

文件结构简单

- 文件夹里包含的是所有页面的内容，在小程序开发中，各个页面的内容（包括布局页面.wxml、样式文件.wxss、配置文件json文件）都是单独放在统一的文件夹中的！

- 该文件夹包含常见的js文件，J2ee的朋友应该很熟悉吧！

- app.js文件，这也是项目的入口文件，小程序将从这里开始它的生命周期！

- app.json文件是配置项目的加载文件和相关组件，项目加载的时候会先在这个文件中寻找自己想要加载的组件，所以它很重要！

- app.wxss文件，里面存放了所有常用的样式文件！

小提醒: 1,想必你也已经看出来了,wxml其实就是我们熟的不能载熟的html文件,wxss就是css文件! 2,app.json文件中的配置项中,不能写注释(没搞清楚为什么会这样!)! 3,app.json中windows选项(也就是页面的头部信息)配置好后,所有页面都会显示这个名称,更改的方法是在需要更改头部信息的页面添加.json文件,重命名navigationBarTitleText的值 4...

地图位置示例

好了，说了这么多，就不浪费时间了，直接开始我们的小演示吧！

配置app.json文件需要加载的页面

//app.json { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#10DDC2", "navigationBarTitleText": "Appjs全局名称", "navigationBarTextStyle":"white" } } 需要注意的是: * pages配置路径的时候,不要写注释! * "navigationBarTitleText": "Appjs全局名称", 是定义的全局名称,局部页面更高的方法在上面我已经提到过了! (什么?没看见?诺!就是在具体要更改的界面增加json文件,重定义navigationBarTitleText的值啦)