从0开发《工程测绘大师》小程序之实现Hello World篇（三）

上一篇我们讲了如何申请注册自己的微信小程序，由于微信小程序内容较多篇幅有限，在该篇我们只会构建一个简单的Hello World程序和介绍一些该篇涉及到的基础知识更多内容请看《小程序开发文档》，进行该篇之前已确保你申请注册号了微信小程序和安装好了微信开发者工具。

目录

1. 使用微信开发者工具
2. 小程序代码的组成
3. 小程序的配置
4. Hello World实现

01、认识微信开发者工具

微信开发者工具是微信团队专门为开发微信小程序而开发的一款编辑器，在该编辑器内我们可以很容易的开发和调试，当然你也可以用其他编辑器来进行开发，比如说WebStorm 、Visual Studio Code等只需要安装一些插件即可开发。

随着微信小程序的诞生各大厂家也都纷纷推出自家的小程序如百度小程序、支付宝小程序、QQ小程序等，每个厂家也都为自家的小程序提供了编辑器便于开发和调试。但我还是比较喜欢微信小程序因为微信小程序的优化最好而且月活人数也是特别多。

说了这么多我们来看看如何使用微信开发者工具，下面我通过配合图片来说明，我们首先新建项目如（图1）进行操作，我们选择填写好项目名称和目录这里这里最重要的是填写我们的AppID（申请注册后在后台设置中可以找到）因为这是我们唯一的识别码，有了它我们开可以开发。其次我们选择小程序开发模式，小程序有小程序开发和插件开发两种开发模式，我们还可以选择用云开发（云开发越来越受欢迎因为它是全栈的前端就可以完成一站式开发）和不使用云开发，我们本次以不使用云服务方式进行开发，然后新建即可。

图1-1 新建项目

可以看出微信开发工具简洁而美观是我喜欢的模样，而且它和其他编辑器不同的一点是还可以用模拟器预览当前的效果特别方便。
图1-2 开发工具主界面

我们可以很清晰的看到工具主界面包括了五部分分别是导航栏、目录、代码区域、模拟器和调试器。
图1-3 开发工具主界面

我们可以配置保存后就自动重新编译这样可以及时看到效果方便调试。

图1-4 设置

当然我们也可以关闭保存自动更新然后手动实现编译，这个看你自己的需要不过笔者建议自动编译节省时间。

我们可以关闭和打开该区域的内容便于调试，云开发要开通后才可以使用如（图1-7），不过开通特别简单而且基础版的是免费的，云开发特别香不过学习成本也有点高，我个人准备下个小程序就用云开发进行开发。

图1-5 只保留模拟器

图1-6 只保留编辑器

图1-7 云开发

图1-8 项目配置

图（1-9）勾选相应的选项如果你需要使用哪个模块勾选就行，但希望你能勾选我目前勾选的这些选项提升在各端的兼容性。

图1-9 本地设置

由于篇幅有限如何使用开发者工具就先说到这里。

02、小程序代码的组成

小程序的目录不复杂比较简单，如果你学过前端开发那么事情就简单了，如果没有学过建议你先去学习HTML、CSS、javascript的相关知识，这样会好理解很多当然学过Vuejs那就更好了，因为小程序的开发语法和Vuejs几乎相同只是指令有点不一样而已。

我们来看看微信小程序中包含的最基本文件都是什么，其实一看无非就是多了一个json文件，把后缀.html（超文本标记语言）改成了》wxml，把.css（层叠样式表）改成了.wxss，而js则保留了原后缀名。我们可以向编写网页那样来写小程序，何乐不为呢。
.json后缀的 JSON 配置文件

.wxml后缀的WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

表2-1

文件	必须	作用
app.js	是	小程序公共逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

而一个小程序的页面由四个文件组成他们分别是：

表2-2

文件类型	必须	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式

下面是这是最基本的的目录结构，我们看（图2-1）会更清晰。

├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils
├── app.js
├── app.json
├── app.wxss

图2-1 目录

注：为了提高我们的开发效率，我们的目录名和文件名尽量保持一致。比如我们跳转某个页面时只需要改变一个文件名就可以轻松跳转，省去更多的代码。

03、小程序

小程序的全局配置在小程序中可算是非常的重要，因为小程序不像网页那样直接在浏览器运行就行。小程序是有非常严格的机制保证运行在微信上宿主上，所以小程序的配置有点特殊。小程序的配置分为全局配置、页面配置和sitemap配置。

全局配置
程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。如以下是我《工程测绘大师》的配置，下面我会在代码中标注说明所代表的的含义，这样可能会更清晰易懂。

{
    "pages": [//页面配置：所有你需要展示的页面必须放在该处，建议新建时创建Page小程序会自动添加到此处。
        //第一个代表首页，也就是说这个页面时小程序加载完后显示的第一个页面,你可以设置任何一个页面为首页。
        "pages/component/pages/index/index",
        "pages/component/pages/idea/idea",
        "pages/component/pages/about/about",
        "pages/component/pages/pageslist/coord/coordbeing/coordbeing",
        "pages/component/pages/pageslist/coord/coordreverse/coordreverse",
        "pages/component/pages/pageslist/coord/centralmeridianis/centralmeridianis",
        "pages/component/pages/pageslist/coord/degtodfm/degtodfm",
        "pages/component/pages/pageslist/coord/dfmtodeg/dfmtodeg",
        "pages/component/pages/pageslist/coord/radtodfm/radtodfm",
        "pages/component/pages/pageslist/coord/dfmtorad/dfmtorad",
        "pages/component/pages/pageslist/coord/citytobuild/citytobuild",
        "pages/component/pages/pageslist/coord/buildtocity/buildtocity",
        "pages/component/pages/pageslist/coord/rendezvousAhead/rendezvousAhead",
        "pages/component/pages/pageslist/coord/rendezvousSide/rendezvousSide",
        "pages/component/pages/pageslist/coord/rendezvousRear/rendezvousRear",
        "pages/component/pages/pageslist/coord/gaussCount/gaussCount",
        "pages/component/pages/pageslist/coord/gaussIan/gaussIan",
        "pages/component/pages/pageslist/coord/singleCurve/singleCurve",
        "pages/component/pages/pageslist/coord/tow-order-matrix/tow-order-matrix",
        "pages/component/pages/pageslist/coord/third-order-matrix/third-order-matrix",
        "pages/component/pages/pageslist/idea/north/north",
        "pages/component/pages/pageslist/idea/get-location/get-location",
        "pages/component/pages/pageslist/idea/calculator/calculator",
        "pages/component/pages/pageslist/idea/calculator/history/history",
        "pages/component/pages/pageslist/idea/traditionTime/traditionTime",
        "pages/component/pages/pageslist/idea/fashionTime/fashionTime",
        "pages/component/pages/pageslist/coord/azimuth/azimuth",
        "pages/component/pages/pageslist/coord/azimuthcal/azimuthcal",
        "pages/component/pages/pageslist/coord/wireBranch/wireBranch",
        "pages/component/pages/pageslist/coord/wireClosed/wireClosed"
    ],
    "permission": {//需要用到定位能力需要添加该代码
        "scope.userLocation": {
            "desc": "展示位置"
        }
    },
  "window": {//导航栏配置：这里可以设置头部导航栏的样式，比如说导航栏的颜色、文字颜色、是否自定义头部导航栏等。
        "navigationStyle": "custom",//表示自定义导航栏，如果没有该行代码就是原生导航栏，原生导航栏大部分情况都满足，如果不满足就要自定义导航栏。
        "backgroundTextStyle": "light",//背景文本样式
        "navigationBarBackgroundColor": "#fff",//导航栏背景色
        "navigationBarTextStyle": "black"//导航栏文本样式（只能有black、white）除非在自定义模式下
    },
    "tabBar": {//底部导航栏配置
        "color": "#515151",//未选中文本颜色
        "selectedColor": "#00da00",//选中后文本颜色（说白了就是点击后的效果）
        "borderStyle": "black",//边框颜色样式（只能有black、white）除非在自定义模式下
        "list": [//底部导航栏列表（最多可以设置5个，最少2个，当然你也可以没有底部导航栏。）
            {
                "iconPath": "pages/icon/cehui.png",//未选中图片
                "selectedIconPath": "pages/icon/selectcehui.png",//选中后的图片
                "pagePath": "pages/component/pages/mapping/mapping",//要显示的页面路径，第一个为首页。
                "text": "测绘"//第一个底部导航栏的文字
            },
            {//同上以此类推
                "iconPath": "pages/icon/ideaicon.png",
                "selectedIconPath": "pages/icon/selectideaicon.png",
                "pagePath": "pages/component/pages/idea/idea",
                "text": "Idea"
            },
            {
                "iconPath": "pages/icon/abouticon.png",
                "selectedIconPath": "pages/icon/selectabouticon.png",
                "pagePath": "pages/component/pages/about/about",
                "text": "关于"
            }
        ]
    },
    "networkTimeout": {//配置网络请求时间
        "request": 10000,
        "downloadFile": 10000
    },
    "style": "v2",//样式版本
    "debug": false,//是否开启调试
    "sitemapLocation": "sitemap.json"//页面索引配置
}

页面配置（其实就是上边的导航栏配置）

页面配置非常重要需要特别谨慎，不过调试器会相应的提示和报错。我都已做相应注释说明，这里不再赘述。

 "window": {//导航栏配置：这里可以设置头部导航栏的样式，比如说导航栏的颜色、文字颜色、是否自定义头部导航栏等。
        "navigationStyle": "custom",//表示自定义导航栏，如果没有该行代码就是原生导航栏，原生导航栏大部分情况都满足，如果不满足就要自定义导航栏。
        "backgroundTextStyle": "light",//背景文本样式
        "navigationBarBackgroundColor": "#fff",//导航栏背景色
        "navigationBarTextStyle": "black"//导航栏文本样式（只能有black、white）除非在自定义模式下
    },
    "tabBar": {//底部导航栏配置
        "color": "#515151",//未选中文本颜色
        "selectedColor": "#00da00",//选中后文本颜色（说白了就是点击后的效果）
        "borderStyle": "black",//边框颜色样式（只能有black、white）除非在自定义模式下
        "list": [//底部导航栏列表（最多可以设置5个，最少2个，当然你也可以没有底部导航栏。）
            {
                "iconPath": "pages/icon/cehui.png",//未选中图片
                "selectedIconPath": "pages/icon/selectcehui.png",//选中后的图片
                "pagePath": "pages/component/pages/mapping/mapping",//要显示的页面路径，第一个为首页。
                "text": "测绘"//第一个底部导航栏的文字
            },
            {//同上以此类推
                "iconPath": "pages/icon/ideaicon.png",
                "selectedIconPath": "pages/icon/selectideaicon.png",
                "pagePath": "pages/component/pages/idea/idea",
                "text": "Idea"
            },
            {
                "iconPath": "pages/icon/abouticon.png",
                "selectedIconPath": "pages/icon/selectabouticon.png",
                "pagePath": "pages/component/pages/about/about",
                "text": "关于"
            }
        ]
    },
    "networkTimeout": {//配置网络请求时间
        "request": 10000,
        "downloadFile": 10000
    },
    "style": "v2",//样式版本
    "debug": false,//是否开启调试
    "sitemapLocation": "sitemap.json"//页面索引配置
}

sitemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。被微信索引后在微信中搜索会提高曝光率当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。

//所有页面都会被索引（默认情况）
{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

//配置 pages/component/pages/pageslist/coord/wireBranch/wireBranch 页面不被索引，其余页面允许被索引
{
  "rules":[{
    "action": "disallow",
    "page": "pages/component/pages/pageslist/coord/wireBranch/wireBranch"
  }]
}

//配置 pages/component/pages/pageslist/coord/wireBranch/wireBranche 页面被索引，其余页面不被索引
{
  "rules":[{
    "action": "allow",
    "page": "pages/component/pages/pageslist/coord/wireBranch/wireBranch"
  }, {
    "action": "disallow",
    "page": "*"
  }]
}

由于篇幅有限更多内容请看《微信小程序文档》

04、Hello World实现

上边说了那么多如果你想快速掌握建议您先把《小程序开发文档》看通一遍，如果你网页设计没有没有基础那就去看这篇《前端较全技术栈汇总》先从简单的HTML、CSS、JS进行学习。我们今天先来弄一个特别简单的hello world小程序吧，再复杂的应用都是从最简单的每行代码开始的，正所谓“不积跬步,无以至千里; 不积小流,无以成江海”。

我们新建一个文件夹为demo有图有真相图（4-1），最终为图（4-2）那样。

图4-1

图4-2

4.1 demo.wxml文件内容

<!-- 内容 -->
<view class="content">
    <!-- 内容文本 -->
    <text>{{msg}}</text>//接收js中的原始数据
</view>
<button bindtap="changeText" type="primary" style="width:90%;">改变文字内容</button>

4.2 demo.wxss文件内容

/* 将page页面居中 */
page{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
/* 内容居中 */
.content {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 内容文本 */
.content text {
    font-size: 40rpx;
    color: red;
    padding: 12rpx;
}

4.3 demo.js文件内容

// pages/demo/demo.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 原始值
        msg: 'Hello World 我是三叶雨'
    },
    // 改变文本事件
    changeText() {
        var that = this
        that.setData({
            msg:'不积跬步,无以至千里; 不积小流,无以成江海'
        })
    }
})

以上代码其实就是将demo.js文件里面的msg挂载到了demo.wxml上进行渲染显示

/**
     * 页面的初始数据
     */
    data: {
        // 原始值
        msg: 'Hello World 我是三叶雨'
    }

之后通过绑定一个按钮事件进行改变原始数据中的文字即可

// 改变文本事件
    changeText() {
        var that = this
        that.setData({
            msg:'不积跬步,无以至千里; 不积小流,无以成江海'
        })
    }

这里我们要注意的是改变原始数据必须用到setData 函数它用于将数据从逻辑层发送到视图层 （异步），同时改变对应的 this.data 的值（同步）。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。仅支持设置可 JSON 化的数据。单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。今天就说这么多目前已经快要到凌晨一点了晚安

-END-
-预告-

以下小程序是本教程最终要开发的产品可以点击体验，下一篇为从0开发《工程测绘大师》小程序之实现首页篇（四）