(一)初识小程序

释怀°Believe

已于 2022-06-05 21:21:45 修改

阅读量183

点赞数

分类专栏：微信小程序文章标签： json 小程序微信

于 2022-06-04 21:39:59 首次发布

本文链接：https://blog.csdn.net/qq_52986400/article/details/125122519

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、安装微信开发者工具
- 1.设置外观和代理
二、小程序代码的构成
三、小程序的宿主环境
四、协同工作和发布

获取小程序的AppID
在这里插入图片描述

一、安装微信开发者工具

主要功能如下：
（1）快速创建小程序项目
（2）代码的查看和编辑
（3）对小程序功能进行调试
（4）小程序的预览和发布

1.设置外观和代理

在这里插入图片描述

二、小程序代码的构成

2.1.了解基本组成

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

2.2小程序页面的组成部分

小程序官方建议把所有的小程序的页面，都存放再pages目录中，以单独的文件夹存在：
在这里插入图片描述

❤️2.2.1JSON配置文件的作用

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

小程序中4中json配置文件
在这里插入图片描述
💟app.json文件
app.json是当前小程序的全局配置，包括了小程序的所有的页面路径，窗口外观，页面表现，底部tab等。
Demo项目里边的app.json配置内容如下：

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

setting中保存了编译相关的配置
projectname中保存的是项目名称
appid中保存的是小程序的账号ID
💟sitemap.json文件
微信已开放小程序内搜索，效果类似于PC网页的SEO。用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信就会通过爬虫形式，为小程序的页面内容创建索引。当用户的搜索关键字和页面索引匹配成功时，小程序的页面将可能展示在搜索的结果中。

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

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

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

2.3WXML模板

2.3.1.什么是WXML

WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发的HTML

2.3.2WXML和HTML的区别

（1）标签名不同

HTML（div,span,img,a)
WXML(view,text,image,navigator)

（2）属性节点不同

 - <a href = “#>超链接</a>

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

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

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

2.4WXSS样式

2.4.1什么是WXSS

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

2.4.2wxss和css的区别

（1）新增了rpx尺寸单位

css需要手动进行像素单位的转换，例如rem
wxss在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自定进行换算
（2）提供了全局的样式和局部样式
形目根目录中的app.wxss会作用域所有小程序页面
局部页面的.wxss样式仅对当前页面有效
（3）wxss仅支持部分css选择器

在这里插入图片描述

2.4JS逻辑交互

2.4.1小程序中的.js文件

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

2.4.2小程序中的.js文件的分类

（1）app.js

是整个项目的入口文件，通过调用App()函数来启动整个小程序

（2）页面的.js
（3）普通的.js

是普通的功能功能模块文件，用来封装公共的函数或属性供页面使用。

三、小程序的宿主环境

3.1宿主环境简介

3.1.1什么是宿主环境

宿主环境指的是程序运行所必须的依赖环境。

例如：
在这里插入图片描述

3.1.2小程序的宿主环境

手机微信是小程序的宿主环境
在这里插入图片描述
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能
例如：微信扫码，微信支付，地理定位

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

（1）通信模型
（2）运行机制
（3）组件
（4）API

3.2通信模型

1.通信的主体
小程序中通信的主体是渲染层和逻辑层，其中：
（1）WXML模板和WXSS样式工作在渲染层
（2）JS脚本工作在逻辑层
在这里插入图片描述
2.小程序的通信模型
小程序中的通信模型分为两部分：
（1）渲染层和逻辑层之间的通信
由客户端进行转发
（2）逻辑层和第三方服务器之间的通信
由微信客户端进行转发

3.3运行机制

小程序启动的过程
（1）把小程序的代码包下载到本地
（2）解析app.json全局配置文件
（3）执行app,js小程序入口文件，
（4）渲染小程序首页
（5）小程序启动完成
页面渲染过程
（1）加载解析页面的.json配置文件
（2）加载页面的.jswxml和.wxss样式
（3）执行页面的.js文件，调用Page()创建页面实例
（4）页面渲染完成

3.4组件

==小程序中的组件也是由宿主环境提供的，==开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为9大类，分别是：
在这里插入图片描述

3.4.1❣️常用的视图类组件❣️

（1）view

普通视图区域
类似于HTML中的div,是一个块级元素
常用来实现页面的布局效果
（2）scroll-view
可滚动的视图区域
常用来实现滚动列表的效果
（3）swiper和swiper-item
轮播图组件

3.4.2view组件的基本使用

在这里插入图片描述

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue
}
.container1 view:nth-child(3){
  background-color: lightpink
}
.container1{
  display: flex;
  justify-content: space-around;
}

<!--pages/list/list.wxml-->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

3.4.3scroll-view组件的基本使用

在这里插入图片描述
横向滚动必须强制性添加宽度
纵向滚动必须添加强制性高度

❤️3.4.4swiper和swiper-item组件的基本使用

在这里插入图片描述
轮播图示例代码

<!--pages/list/list.wxml-->

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray"
autoplay interval="3000" circular>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>

  </swiper-item>
  
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
  <swiper-item>
    <view class="item">D</view>
  </swiper-item>
</swiper>

/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightblue;
}
swiper-item:nth-child(3) .item{
  background-color: pink;
}
swiper-item:nth-child(4) .item{
  background-color:yellowgreen;
}

在这里插入图片描述

3.5常用的基础内容组件

（1）text

文本组件
类似于HTML中的span标签，是一个行内元素
(2)rich-text
富文本组件
支持把HTML字符串渲染到WXML结构

text组件的基本使用
通过text组件的selectable属性，实现长按选中文本内容的效果

rich-text组件的基本使用
通过rich-text组件的nodes属性节点，可以把HTML字符串渲染为对应的UI结构：

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

其它常用组件
(1)button

按钮组件
通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权信息等）

 <button>普通按钮</button>
<button type="primary"> 主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini"> 主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- 镂空按钮 -->
<button plain>普通按钮</button>
<button type="primary" plain> 主色调按钮</button>
<button type="warn" plain>警告按钮</button>