微信小程序-起步

小程序简介

小程序与普通网页开发的区别

1. 运行环境不同
   网页运行在浏览器中
   小程序运行在微信环境中
2. API不同
   由于运行环境不同，所以小程序中无法调用DOM和BOM的API
   但是小程序中可以调用微信环境提供的各种API，例如：
   地理定位
   扫码
   支付
3. 开发模式不同
   网页的开发模式：浏览器+代码编辑器
   小程序：
   申请小程序开发账号
   安装小程序开发者工具
   创建和配置小程序项目

注册小程序开发账号

使用浏览器打开http://mp.weixin.qq.com/ 点击立即注册

安装步骤填写信息注册即可：

微信小程序注册入口和注册流程（完整版图文教程）

个人接口可能权限少一点 不支持微信认证 微信支付以及高级接口相关的内容

如何获取小程序的AppID

登录之后：

安装微信开发者工具

推荐下载和安装最新的稳定版的微信开发者工具，下载页面的链接：下载

安装完成后 微信扫码登录即可
设置-外观 调整主题颜色
设置-编辑器-调整字号以及行距
设置-代理设置-不使用代理直连网络

创建第一个小程序

选择javascript模板 不使用云服务开发 创建

可以在模拟器查看项目效果 也可以通过预览-扫描二维码 在手机上查看

主界面有5个组成部分：
菜单栏： 帮助-开发者文档 工具-构建npm
工具栏
模拟器
代码编辑区
测试区

小程序代码的构成

项目结构

pages用来存放所有小程序的页面
utils用来存放工具性质的模块
app.js小程序项目的入口文件
app.json小程序项目的全局配置文件
app.wxss小程序项目的全局样式文件
project.config.json项目的配置文件
sitemap.json用来配置小程序及其页面是否允许被微信索引

小程序页面的组成部分

小程序官方建议把所有小程序的页面 都存放在pages目录中，以单独的文件夹存在

1. js文件 页面的脚本文件，存放页面的数据、事件处理函数等
2. json文件 当前页面的配置文件，配置窗口的外观、表现等
3. wxml文件 页面的模板结构文件
4. wxss文件 当前页面的样式表文件

JSON配置文件的作用

json是一种数据格式，在实际开发中，json总是以配置文件的形式出现
小程序中有4种json配置文件:

1. 项目根目录中的app.json配置文件
2. 项目根目录中的project.config.json配置文件
3. 项目根目录中的sitemap.json配置文件
4. 每个页面文件夹中的.json配置文件

app.json

app.json是当前小程序的全局配置，包括了小程序所有页面路径、窗口外观、界面表现、底部tab等

pages：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景色、文字颜色
style：全局定义小程序组件所使用样式的版本
sitemapLocation： 用来指明sitemap.json的位置

project.config.json

project.config.json是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，
例如：

1. setting中保存了编译相关的配置
2. projectname中保存的是项目名称
3. appid保存的是小程序的账号ID
   

sitemap.json

微信现已开发小程序内搜索，效果类似于PC网页的SEO。 sitemap.josn文件用来配置小程序页面是否允许被微信索引

页面的json配置文件

对本页面的窗口外观进行设置，页面中的配置项会覆盖app.json的window中的相同配置项

新建小程序页面

只需要在app.json-> pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件

修改项目首页

只需要调整