零基础入门小程序开发快速上手

零基础入门:小程序开发快速上手

Day1

今日事今日毕,今天是跟着黑马学习小程序开发的第一天,并且写完了笔记qwq,明天继续~~
明天还会继续更新的！！！

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

1.运行环境不同 ：网页运行在浏览器环境中，小程序运行在微信环境中
2.API不同：由于运行环境的不同，所以小程序中，无法调用DOM和BOM的API。但是，小程序中可以调用微信环境提供的各种API，例如：地理定位，扫码，支付。
API就是操作糸统留给应用程序的一个调用接口。应用程序通过调用操作糸统的API而使操作糸统去执行应用程序的命令。API：应用程序编程接口
3.开发模式不同：网页的开发模式：浏览器+代码编辑器 。小程序：申请小程序开发账号；安装小程序开发者工具；创建和配置小程序项目。

第一个小程序

1.注册账号 https://mp.weixin.qq.com/ 进入该网址，立即注册-> 小程序->填写信息
2.获取小程序的AppID
3.安装开发者工具
开发者工具网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
安装完成
4.创建项目：新版本直接选择不使用云服务，勾选js基础那个模板点击创建
5.在模拟器中查看项目效果：编译 在真机上预览项目效果：编译右侧的预览
6.主界面的5个组成部分

小程序页面的组成成分

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

json文件：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON 是一种文本格式，但它不是一种编程语言，而是一种表示结构化数据的方法。

以下是一个简单的JSON文件示例：

{
 "name": "John Doe",
 "age": 30,
 "city": "New York",
 "isEmployed": true,
 "skills": ["JavaScript", "Python", "Java"],
 "address": {
   "street": "123 Main St",
   "zipcode": "10001"
 },
 "phoneNumbers": [
   {"type": "home", "number": "212 555-1234"},
   {"type": "work", "number": "646 555-4567"}
 ]
}

JSON 文件的特点

键值对：JSON 数据由键值对组成。每个键值对中的键（key）是字符串，并使用双引号括起来。值（value）可以是字符串（必须使用双引号括起来）、数字、布尔值（true 或 false）、数组（在方括号中）、对象（在花括号中），或者 null。

对象：对象使用花括号 {} 包围。对象可以包含多个键值对，每个键值对之间用逗号分隔。

数组：数组使用方括号 [] 包围。数组中的每个值可以是任意类型（包括字符串、数字、对象、数组、布尔值或 null）。

字符串：字符串必须使用双引号 " 包围，而不能使用单引号 '。

使用 JSON 的场景

JSON 由于其简单性和可读性，广泛应用于各种场景，包括但不限于：

Web 开发：作为客户端和服务器之间传输数据的格式。
配置文件：作为应用程序的配置文件。
数据存储：作为轻量级的数据存储格式，如NoSQL数据库中的文档。
数据交换：在应用程序之间交换数据。

解析 JSON

在多种编程语言中，都有用于解析和生成 JSON 的库。例如：

JavaScript：使用 JSON.parse() 方法将 JSON 字符串解析为 JavaScript 对象，使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。
Python：使用 json 模块中的 json.loads() 方法解析 JSON 字符串，使用 json.dumps() 方法生成 JSON 字符串。
Java：可以使用第三方库如 Jackson 或 Gson 来解析和生成 JSON。

JSON 的灵活性和易用性使其成为数据交换和存储的首选格式之一。

app.json文件

全局配置只是一个公用的默认设置，是所有页面的默认设置，后面才是更改页面加工

小程序名称不等于项目名称

project.config.json文件

sitemap.json文件

页面的.json配置文件

新建小程序页面

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

修改项目首页

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

WXML

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

WXSS

WXSS是一套样式语言，类似于CSS
WXSS和CSS的区别

JS逻辑交互

普通的.js文件，如utils.js文件

宿主环境

什么是宿主环境：程序运行所必须的依赖环境（比如Android是安卓软件的宿主环境）
小程序的宿主环境：手机微信是小程序的宿主环境
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，比如：微信扫码，微信支付，微信登录，地理定位，etc…
手机微信为小程序的运行提供了以下四个支持：

通信模型：

1.通信的主体
2.小程序的通信模型：主要分为两部分 渲染层和逻辑层之间的通信（由微信客户端进行转发） == 逻辑层和第三方服务器之间的通信==（由微信客户端进行转发)

运行机制

1.小程序启动过程

2.页面渲染的过程

组件

视图容器：

view: 普通视图区域；类似于HTML中的div,是一个块级元素；常用来实现页面的布局效果

在list.wxml（将pages/list/list.wxml删掉）写结构 在list.wxss中写样式。

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

/* pages/list/list.wxss */
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}

.container1 view:nth-child(1){
background-color: rebeccapurple;}
.container1 view:nth-child(2){background-color:blue;}
.container1 view:nth-child(3){background-color:antiquewhite;}

.container1 {
display: flex;
justify-content: space-around;
}

我第一次写的时候没有颜色，最后发现是view和：之间不能留空格！

scroll-view:可滚动的视图区域；经常用来实现滚动列表效果

scroll-y:允许纵向滚动（固定的高度） scorll-x:允许横向滚动（固定的宽度）

swiper和swiper-item:轮播图容器组件和轮播图item组件，有几个轮播图就要放几个swiper-item

基础内容
text:文本组件；类似于HTML中的span标签，是一个行内元素
通过user-select属性，实现长按选中文本内容的效果
rich-text:富文本组件；支持HTML字符串渲染为WXML结构。通过node属性节点，把HTML字符串渲染为对应的UI结构

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

效果如下：
其他常用组件
button:按钮组件；功能比HTML中的button按钮丰富；通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取yoghurt信息)
image:图片组件；默认宽度300px,高度240px
navigator:页面导航组件；类似于HTML中的a链接

API

小程序中的API（应用程序接口）在开发过程中起着至关重要的作用。它们为开发者提供了丰富的功能接口，使得开发者能够轻松实现小程序的各种功能，并满足开发过程中的各种需求。(获取用户信息，本地存储，支付功能。分为如下三类：
事件监听API：以on开头，用来监听某些事件的触发
同步API：以Sync结尾的API都是同步API；同步API的执行结果，可以通过函数返回值直接获取，如果执行错误会抛出异常
异步API：类似于jQuery中的$.ajax(options)函数，需要通过success,fail,complete接受调用的结果

协同工作

项目成员的组织结构
开发流程
小程序成员管理
不同项目成员对应的权限
开发者的权限说明：
1.开发者权限：可以使用小程序开发者工具对小程序的功能进行代码开发；>2.体验者权限：可使用体验版小程序；
3.登录权限：可登录小程序管理后台，无需管理员确认
4.开发设置：设置小程序服务区域名，消息推送及普通链接二维码打开小程序
5.腾讯云管理：云开发相关设置
小程序的版本：
发布上线：
上传代码
登录微信小程序后台->管理->版本管理查看
基于小程序码推广
查看小程序运营数据的两种方式：

总结

]

发布上线：
上传代码[外链图片转存中…(img-BJYceAVX-1737129139242)]
登录微信小程序后台->管理->版本管理查看
基于小程序码推广[外链图片转存中…(img-dex4tTNj-1737129139242)]
查看小程序运营数据的两种方式：[外链图片转存中…(img-b6aSsPCH-1737129139242)]

总结