微信小程序

小程序起步

小程序开发与普通网页的开发不同，不同点如下

运行环境不同微信小程序当然运行在微信的环境中了
API不同无法使用Dom和Bom使用微信提供的api
开发模式的不同

对开发模式做简要的说明。在开发模式上主要是网页开发需要浏览器，和编辑器

小程序开发模式

申请小程序开发账号
安装小程序开发工具
创建和配置小程序项目

第一个小程序

第一步注册小程序开发账号，进入微信的开发者平台

找到立即注册注册一个开发者账号

在这里插入图片描述
之前自己注册过过程就不在演示了

获取小程序的Appid

在开发管理的开发设置处找到自己的Appid
在这里插入图片描述

了解微信开发者工具

官方推荐使用的开发者工具。下载稳定版的开发者工具。

无脑安装微信小程序的开发者工具
在这里插入图片描述

安装完成之后打开微信开发者工具
在这里插入图片描述
扫码登录自己的微信开发者工具

设置微信开发者工具的外观和代理

设置外观颜色为浅色的样式
在这里插入图片描述
修改代理的方式

创建一个微信小程序项目

使用自己的appid创建第一个微信小程序项目
在这里插入图片描述
选择不使用云服务来进行

到此为止我们就创建了一个微信小程序项目

点击编译即可在模拟器上查看最新的效果
在这里插入图片描述

在这里插入图片描述
预览按钮扫码观察对应的效果

主页面的组成部分

在这里插入图片描述

认识小程序项目的基本组成结构

在这里插入图片描述

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

小程序页面的组成部分

小程序官方建议把所有小程序的页面都存放在pages目录中，以单独文件夹的形式存在。
在这里插入图片描述
其中index目录，每个页面由四个基本的文件组成，

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

各种json文件简述

app.json：全局的配置文件
在这里插入图片描述
每个页面中的配置文件例如index和logs中的配置文件

和整个项目的配置文件
在这里插入图片描述

小程序配置

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

具体的全局配置项可以去参考官网中提供的开发文档

在这里插入图片描述

pages ：记录小程序当前的页面路径
window:定义页面颜色背景色等
style 定义小程序组件所使用的样式版本

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}