小程序开发

微信小程序开发Day1

Part1 小程序起步

简介：
小程序开发和普通网页开发的区别（三大不同）

• 1..运行环境不同：小程序运行在微信环境中，网页运行在浏览器环境中

• 2.API不同 ，由于运行环境的不同，在小程序中无法调用DOM和BOM的API，但是，小程序可以调用微信环境提供的各种API，例如：地理定位，扫码，支付等

• 3.开发模式不同：

网页开发模式：浏览器+代码编辑器

小程序标准开发模式：

1.申请小程序开发账号

2.安装小程序开发者工具

3.创建和配置小程序项目

API介绍转自百度

1.小程序开发账号注册
(主题类型：若为个人类型，则不支持微信认证，微信支付及高级接口能力)
目的：为了获取小程序的APPID  开发--->开发设置--->APPID获取
首先安装
2.下载微信开发者工具
3.扫码登陆

账号注册网址

微信开发工具网址

微信开发工具（稳定版下载）作用

• 快速创建小程序项目
• 代码的查看和编辑（不推荐使用vscode，它单纯的是一个代码编辑器）
• 对小程序功能进行调试
• 小程序的预览和发布

填写相关信息
如果没有APPID，可以注册也可以使用体验号

设置外观和代理

在设置中 外观改动  代理改动（由默认代理改为：不受任何代理，勾选后直连网络）

创建小程序项目

点击+号，新建小程序项目，（新建存放目录，APPID填写，后端服务：先选用不使用云服务 语言模式选择（JavaScript））

查看小程序效果
方法一：在模拟器上查看效果（工具自带，直接点击编译查看）
方法二：在手机上预览项目效果（）点击预览按钮，扫码查看

主界面的五个部分：菜单栏 工具栏 模拟器 代码编辑区 调试区

Part 2 小程序代码构成

• 1. pages 用来存放所有小程序的页面
  2. utils 用来存放工具性质的模块（例如：“格式化时间的自定义模块”）
  3. app.js 小程序项目入口文件
  4. app.json 小程序项目的全局配置文件
  5. app.wxss 小程序项目的全局样式文件
  6. project.config.json 项目配置文件
  7. sitemap.json用来配置小程序及其页面是否允许被微信索引

​

Part 2 .1小程序页面的组成部分

#官方建议将所有小程序页面都存放在pages目录中，已单独的文件夹存在
#每个页面有四个基本文件组成，并且已单独的文件夹存在

• 1..js文件（页面的脚本文件，存放页面的数据、事件处理函数等）

• 2..json文件（当前页面的配置文件，配置窗口的外观、表现等）

• 3.wxml文件（页面的模板结构文件）

• 4.wxss文件（当前页面的样式表文件）

  ​

1.JSON配置文件

#JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不例外：通过不同的.JSON配置文件，可以对小程序项目进行不同级别的配置。

小程序中有四种.json的配置文件，分别是：

• 项目根目录中的app.json配置文件(全局配置文件)

• 项目根目录中的project.config.json配置文件

• 项目根目录中的sitemap.json配置文件

• 每个文件夹中的.json配置文件

  2. APP.json文件（全局配置文件）

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

  Demo项目里边的app.json配置如下：

  作用

  • **1.pages：**用来记录当前小程序所有的页面路径

  • **2.window:**全局定义小程序所有页面的背景色、文字颜色等

  • **3.style:**全局定义小程序组件所使用的样式模板

  • 4.sitemapLocation用来指明 sitemap.json的位置

    ​

3. project.config.json文件

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

• setting中保存了编译相关的配置

• projectname中保存的是项目名称

• Appid中保存的是小程序的账号ID

  ​

4. sitemap.json文件

#微信现已开放的小程序内搜索，效果类似于pc网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。解释：当开发者允许微信索引时，微信会通过爬虫的形式，为小程序页面内容建立索引。当用户的搜索关键字和也页面的索引匹配成功时，小程序页面将可能展现在搜索结果中。

SEO详细

注意 sitemap的搜索提示是默认开启的，如果要关闭它，可以在小程序配置文件project.config.json的setting中配置字段checksitemap为false

5.页面的.json配置文件

#小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置会覆盖app.json的window中相同的配置项。