微信小程序项目开发【从0到1~入门篇】

前言:读研期间每天靠着国家低保+课题组补助生存有点困难,因此想要学习个小程序,接一些外快,学习资料主要参考的是程序员的小程序课程的文档,如果你会,,,的话学起来会更快,不会的话也没关系。学习过程中遇到了很多问题和一些坑,在文章中我会分享出来,下次开始咱们的小程序之旅吧!

第一天你将学会以下内容:

① 能够知道如何创建小程序项目

⚫ 微信者工具的使用、 的获取

② 能够清楚小程序项目的基本组成结构

⚫ .、.、.、 文件夹

③ 能够知道小程序页面由几部分组成

⚫ 、、、

④ 能够知道小程序中常见的组件如何使用

⚫ 、、

⑤ 能够知道小程序如何进行协同和发布

⚫ 成员管理、发布小程序、查看运营数据

小程序是一种不需要下载安装即可使用的应用,它实现了应用的即搜即用的概念。小程序具备以下特点:

无需下载安装:用户通过微信、支付宝、百度等平台搜索或扫描小程序码即可打开使用,无需在手机上安装额外的应用。触手可及:小程序可以快速地触达用户,满足用户的即时需求。用完即走:用户在使用完小程序后,无需担心占用手机存储空间,可以随时关闭。功能丰富:小程序可以提供消息通知、线下扫码、分享转发等多种功能,满足不同场景下的需求。成本较低:相较于传统,小程序的周期更短,成本更低。跨平台兼容:小程序可以在多个平台上运行,如微信、支付宝、百度等,覆盖了广泛的用户群体。

温馨提示:一个身份证最多只能注册5个小程序账,所以要慎重使用自己的身份证。当注册满了以后会提示:该身份证记登记过5次,请使用另一个身份证完成用户信息登记。

个人小程序不支持微信认证,微信支付以及高级接口能力

小程序的( )是小程序在特定平台上的唯一标识符。每个小程序在注册时都会被分配一个,它是小程序者进行、调试和发布的关键凭证之一。以下是关于小程序的一些详细信息:

获取:

微信小程序中,者需要在微信公众平台注册小程序,完成相关认证后,系统会分配一个。在支付宝小程序中,者需要在支付宝开放平台注册并创建小程序,同样会获得一个。在百度智能小程序中,者需要在百度智能小程序平台注册,并通过审核后获得。 使用:

在过程中,用于小程序的配置文件(如微信小程序的)中,以便于平台识别和管理小程序。在调试阶段,者需要使用来启用工具的相关功能,如模拟支付、授权登录等。在发布小程序时,是必不可少的,它用于提交审核和上线。 的作用:

识别唯一性:确保小程序在平台上的唯一性。权限验证:用于获取平台提供的各种服务权限,如用户信息、支付功能等。数据统计:平台会根据收集小程序的运营数据,如访问量、用户行为等。 保密性:

是敏感信息,者应当妥善保管,避免泄露给第三方,以免造成不必要的风险。

如果你是小程序者,你可以按照以下步骤找到你的:

微信小程序:登录微信公众平台 -> 小程序 -> 管理 -> 基本设置,在这里可以找到你的。支付宝小程序:登录支付宝开放平台 -> 小程序中心 -> 管理中心 -> 基本信息页面,可以查看到。百度智能小程序:登录百度智能小程序平台 -> 控制台 -> 小程序详情,可以找到。

小程序的很重要,以后要用到。

存放当前小程序所有页面的路径,可以不主动添加,可直接在目录下右击新建页面,会自动注册增加该页面的路径。

1. 什么是

( )是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页中的 。

2. 和 的区别

① 标签名称不同

⚫ (, , , )

⚫ (, , , )

② 属性节点不同

③ 提供了类似于 中的模板语法

⚫ 数据绑定

⚫ 列表渲染

⚫ 条件渲染

( )是一套样式语言,用于描述 的组件样式,类似于网页中的 。

和 的区别

① 新增了 尺寸单位

⚫ 中需要手动进行像素单位换算,例如

⚫ 在底层支持新的尺寸单位 ,在不同大小的屏幕上小程序会自动进行换算

② 提供了全局的样式和局部样式

⚫ 项目根目录中的 . 会作用于所有小程序页面

⚫ 局部页面的 . 样式仅对当前页面生效

③ 仅支持部分 选择器

⚫ . 和 #

⚫ 并集选择器、后代选择器

⚫ :: 和 :: 等伪类选择器

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

小程序中的 文件分为三大类,分别是:

① .

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

② 页面的 . 文件

⚫ 是页面的入口文件,通过调用 () 函数来创建并运行页面

③ 普通的 . 文件

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

1. 小程序中组件的分类

小程序中的组件也是由宿主环境提供的,者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:

① 视图容器

② 基础内容

③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ 地图组件

⑦ 画布组件

⑧ 开放能力

⑨ 无障碍访问

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

⚫ 普通视图区域

⚫ 类似于 中的 ,是一个块级元素

⚫ 常用来实现页面的布局效果

② -

⚫ 可滚动的视图区域

⚫ 常用来实现滚动列表效果

③ 和 -

⚫ 轮播图容器组件 和 轮播图 组件

右下角第4段代码解释:

.1

这里的.表示选择器是一个类选择器。1是类名,这意味着这个样式规则将应用于所有具有1类的元素。

: ;:

当一个元素设置为: ;后,它的直接子元素将按照弹性盒模型()的布局方式排列。是一种用于在容器内分配和对齐子元素的一维布局方法。

-: -

-属性用于设置弹性容器内弹性项目在主轴上的对齐方式。

-值表示弹性项目将在主轴上平均分布,每个项目两侧的空间相等

提示:提交审核阶段有些需要注意的事项,一个是小程序的代码最大限制为2,如果有分包的话可以有更大容量,如果您需要与后端交互,建议把所有相关的图片放到服务器上,另一个就是注册小程序前需检查小程序的和名字是否已经被注册过,是否被别人注册了商标

代码以及课件和视频资源方式:

关注公众:小猿搜码

后台发送:小程序

© 版权声明
THE END
分享