【学习笔记】微信小程序STEP1

【学习笔记】微信小程序STEP1

---

$声明：此文章是博主的学习笔记，参照黑马程序员免费公开课，切勿商用，未经博主允许禁止转载。$

---

• 学习目标
  1. 如何创建小程序项目
  2. 小程序项目的基本组成结构
  3. 小程序页面的组成部分
  4. 小程序的组件使用
  5. 小程序的协同开发和发布

---

目录

---

一、小程序简介

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

1）运行环境不同

网页运行在浏览器环境中；小程序运行在微信环境中。

2）API不同（数据接口）

小程序无法调用DOM和BOM的API，但可调用微信环境提供的各种API（地理定位、扫码、支付）。

3）开发模式不同

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

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

2、体验小程序

小程序官方组件展示

---

二、第一个小程序

注意选择js而不是ts

---

三、小程序代码的组成

1、小程序的目录结构

官方文档-目录结构

2、小程序的页面组成

3、JSON配置文件

1）JSON配置文件的作用

2）app.json文件

• “window”

  "navigationBarBackgroundColor": "#fff",   //页面上方栏背景色
  

3）project.config.json文件

4）sitemap.json文件

5）页面的.json配置文件

"navigationBarBackgroundColor": "#00B26A",  //页面上方栏背景色

6）新建小程序页面

4、WXML模板

1）什么是WXML

标签语言，用于构建页面结构

2）WXML和HTML的区别

1. 标签名称不同
   • HTML （div布局,span文本,img图片,a导航跳转）
   • WXML （view ,text , image ,navigator）
2. 属性节点不同

   • HTML

     <a herf="#">超链接</a>
     

   • WXML

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

3.提供了类似于Vue中的模板语法

• 数据绑定
• 列表渲染
• 条件渲染

5、WXSS样式

1）什么是WXSS

样式语言，描述WXML的组件样式

3）WXSS和CSS的区别

1. 新增了rpx尺寸单位
   • CSS中需要手动进行像素单位换算，例如rem
   • WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动换算
2. 提供了全局的样式和局部样式
   • 项目根目录中的app.wxss会作用于所有小程序界面
   • 局部页面的.wxss样式仅对当前页面生效
3. WXSS仅支持部分CSS选择器
   • .class类选择器和#idid选择器
   • element 元素选择器
   • 并集选择器、后代选择器
   • ::after和::before等伪类选择器

6、JS逻辑交互

1）小程序中的.js文件

.js文件来处理用户的操作。如响应用户的点击、获取用户的位置等。

2）小程序中的.js文件的分类

1. app.js是整个小程序的入口文件，通过APP()函数来启动整个小程序。
2. 页面的.js文件。是页面的入口文件，通过调用Page()函数来创建并运行页面。
3. 普通的.js文件。是普通的功能模块文件，用来封装公共函数或属性供页面使用。

四、小程序的宿主环境

1、什么是宿主环境

2、小程序的宿主环境

3、小程序宿主环境包含的内容

1）通讯模型

1. 通讯的主体

   

2. 小程序的通信模型

   

2）运行机制

1. 小程序启动的过程

   

2. 页面的渲染过程

   

3）组件

1. 小程序中组件的分类

   

2. 常用的视图容器类组件

   

3. <view>组件的基本使用

   .wxss flex布局

   .wxss .container{}类名选择器

   

4. <scroll-view>组件的基本使用（滚动）

   

5. <swiper>和<swiper-item>组件的基本使用（轮播图）

   /*
   小类组件样式更改
   
   小类组件:nth-child() .小类名{}   .小类名可省略
   */
   swiper-item:nth-child(1) .item{
     background-color: lightgreen;
   }
   
   /*
   .大类名 小类组件:nth-child(){}
   */
   .swiper-container swiper-item:nth-child(3){
     background-color: lightpink;
   }
   

   

6. swiper组件的常用属性

   <swiper class="swiper-container" autoplay interval="200" circular>
     <swiper-item>
       ...
     </swiper-item>
   </swiper>
   

   

7. 常用基础内容组件

   ①text

   • 文本组件

   • 类似于HTML中的span标签，是一个行内元素

   • text组件的基本使用

     <view>
       长按选中效果
       <text user-select>15700000000</text>
     </view>
     

   ②rich-text

   • 富文本组件

   • 支持把HTML字符串渲染为WXML结构

   • rich-text组件的基本使用

     <rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
     

   

8. 其他常用组件

   ①button

   • 按钮组件

   • 功能比HTML中的button按钮丰富

   • 通过open-type属性可以调用微信提供的各种功能

   • button按钮的基本使用

     <view>~~~~~~~通过type指定按钮类型~~~~~~~</view>
     <button>默认按钮</button>
     <button type="primary">主色按钮</button>
     <button type="warn">警告按钮</button>
     
     <view>~~~~~~~size="mini"小尺寸按钮~~~~~~~</view>
     <button size="mini">默认按钮</button>
     <button size="mini" type="primary">主色按钮</button>
     <button size="mini" type="warn">警告按钮</button>
     
     <view>~~~~~~~plain 镂空按钮~~~~~~~</view>
     <button plain size="mini">默认按钮</button>
     <button plain size="mini" type="primary">主色按钮</button>
     <button plain size="mini" type="warn">警告按钮</button>
     

   ②image

   • 图片组件

   • image组件默认长宽约300px 240px

   • image组件的基本使用

     <view>~~~~~~~图片组件~~~~~~~</view>
     <image></image>
     <image src="/pages/images/思考.jpg"></image>
     <image src="/pages/images/思考.jpg" mode="aspectFit"></image>
     <image src="/pages/images/思考.jpg" mode="aspectFill"></image>
     <image src="/pages/images/思考.jpg" mode="widthFix"></image>
     <image src="/pages/images/思考.jpg" mode="heightFix"></image>
     

     image{
       border: 1px solid red;
     }
     

     

     

   ③navigator

   • 页面导航组件
   • 类似于HTML的a链接

4）API

1. 小程序API概述

   小程序API由宿主环境提供，开发者可调用微信提供的API.

2. 小程序API的3大分类

   

---

五、协同工作和发布

1、项目成员的组织结构

2、项目开发流程

3、小程序成员管理

4、小程序不同项目成员对应的权限

5、小程序成员管理入口

小程序 (qq.com)

6、小程序的版本

7、发布上线

上传代码→提交审核→发布