微信小程序(一)小程序与web开发的区别&创建新项目_微信小程序怎么像web一样

1.小程序的开发准备

1.1小程序的安装与创建

1.1.1 生产appid

前往小程序官网，注册（不赘述了）；登录上去之后，需要获得小程序的appid

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后， 可登录，然后获取APPID。
登录成功后可看到如下界⾯ 然后复制你的APPID,保存起来

1.1.2 下载安装微信开发者工具

如图，下载安装微信开发者工具

1.1.3 新建小程序项目

打开微信小程序，新建项目，粘贴上述的appid，选择不使用云开发，JavaScript

点击确定

如此我们就新建好了一个小程序的项目。

2.微信小程序与普通web开发的区别

2.1 运行机制不同

2.2 面对的开发环境不同

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

2.3 开发过程

3.认识微信小程序

3.1 微信开发者工具

微信开发者工具由五个功能区组成

3.2 小程序项目结构

3.2.1 项目基本结构组成

3.2.2 小程序页面组成

小程序官方建议把所有的小程序页面部分都放在pages文件夹当中，以单独的文件夹形式存在。每个页面由四个文件组成。

3.3 json配置文件

json配置文件的作用:

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

---

小程序项目中分别有4种json配置文件

3.3.1 app.json配置文件

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

以我们当前新建的项目为例

3.3.2 project.config.json文件

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

3.3.3 sitemap.json文件

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

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在配置文件 sitemap.json当中修改action字段为disallow。

3.3.4 页面的json配置文件

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

注意: json文件当中不能写任何的注释。

3.4 新建小程序页面

只需要在app.json -> pages属性下新增页面的路径，小程序开发者工具会自动帮我们创建对应的页面文件。

不再需要我们手动创建页面文件，很舒服哦。

3.4.1 修改小程序项目首页

只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染。

3.5 wxml模板

3.5.1 什么是wxml

wxml(weixin markup language）是微信小程序设计的一套标签语言，用来构建小程序页面的结构，类似web端的html。

3.5.2 html和wxml的区别

• 标签名称不同

  <div></div>
  <span></span>
  <img>
  <a></a>
  1
  2
  3
  4

  <view></view>
  <text></text>
  <image>
  <navigator></navigator>    
  1
  2
  3
  4

• 属性节点不同

  <a href="https://www.baidu.com">跳转百度</a>
  1

  <navigator url="/pages/home/home"></navigator>
  1

• 提供的类似vue当中的模板语法
  1.数据绑定
  2.列表渲染
  3.条件渲染

3.6 wxss样式

3.6.1什么是wxss？

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

3.6.2 wxss和css的区别

• 新增了rpx单位，css种需要自己进行相对单位的计算如px -> rem;wxss在底层支持rpx，会根据不同设备尺寸进行自动换算。
• 提供了全局样式和局部样式
  • 项目根目录当中的app.wxss会作用于所有小程序页面
  • 局部页面的.wxss文件则只对当前页面生效
• wxss仅支持部分css选择器
  • .class和#id(类名和id选择器)
  • element(元素选择器)
  • 并集选择器，后代选择器
  • ::after和::before这俩伪元素选择器(只支持这俩个)
  • :first-child和last-child伪类选择器(只支持这俩)

3.7 JavaScript逻辑交互

3.7.1 小程序当中的.js文件

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：响应用户的 点击、获取用户的位置等等。

3.7.1.1 小程序js文件分类

    |
1

| ------------- | ------------------------------------------------------------ |
| app.js | 整个小程序项目的入口文件，通过调用App()函数来启动整个小程序 |
| 页面的.js文件 | 页面的入口文件，通过调用Page()函数来创建并运行页面 |
| 普通的.js文件 | 是普通的功能模块文件，用来封装公共工具函数或者属性供页面使用 |