目录

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

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

创建第一个小程序

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

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

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

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

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

⚫ app.js、app.json、app.wxss、pages 文件夹

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

⚫ wxml、wxss、json、js

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

⚫ view、text、image

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

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

1、小程序简介

https://i-blog.csdnimg.cn/direct/297883bc01c5410dbcfa415b026508c9.png

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

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

https://i-blog.csdnimg.cn/direct/3beceec98eb342099bb5586b44ec6ffd.png

2、第一个小程序:注册小程序开发账号

https://i-blog.csdnimg.cn/direct/9fb5aef540684b2688cb3ac7e8176b85.png

https://i-blog.csdnimg.cn/direct/83be2505f2ea42bb8f94daefc7ec324f.png

https://i-blog.csdnimg.cn/direct/ae4f2341cce3443c96c680cc8f1f0aa7.png

https://i-blog.csdnimg.cn/direct/5e06e318b201439b84ff71846526262b.png

https://i-blog.csdnimg.cn/direct/32469823285f4034959adafbf81f3a53.png

https://i-blog.csdnimg.cn/direct/9f58d2523fdf41069eb19c33cafd1d1b.png

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

https://i-blog.csdnimg.cn/direct/ed04b8f02dd7403f8a980fbf6c2bc33d.png

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

https://i-blog.csdnimg.cn/direct/475ae38a769444308102b9358c30b623.png

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

  1. 获取AppID
    • 在微信小程序中,开发者需要在微信公众平台注册小程序,完成相关认证后,系统会分配一个AppID。
    • 在支付宝小程序中,开发者需要在支付宝开放平台注册并创建小程序,同样会获得一个AppID。
    • 在百度智能小程序中,开发者需要在百度智能小程序平台注册,并通过审核后获得AppID。
  2. 使用AppID
    • 在开发过程中,AppID用于小程序的配置文件(如微信小程序的 app.json )中,以便于平台识别和管理小程序。
    • 在调试阶段,开发者需要使用AppID来启用开发工具的相关功能,如模拟支付、授权登录等。
    • 在发布小程序时,AppID是必不可少的,它用于提交审核和上线。
  3. AppID的作用
    • 识别唯一性:确保小程序在平台上的唯一性。
    • 权限验证:用于获取平台提供的各种服务权限,如用户信息、支付功能等。
    • 数据统计:平台会根据AppID收集小程序的运营数据,如访问量、用户行为等。
  4. 保密性
    • AppID是敏感信息,开发者应当妥善保管,避免泄露给第三方,以免造成不必要的风险。

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

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

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

3、第一个小程序:安装开发者工具

3.1 了解微信开发者工具

https://i-blog.csdnimg.cn/direct/3fa1d11b2b284f6d86c612d4ba6e571f.png

3.2下载安装

https://i-blog.csdnimg.cn/direct/a5c3c39b547f44f3b51009a2ceb444c1.png

https://i-blog.csdnimg.cn/direct/f0037845f4e048e2bb46d666d3155071.png

https://i-blog.csdnimg.cn/direct/2930515a383747678df5806d057ed5b8.png

3.3 扫描登录

https://i-blog.csdnimg.cn/direct/2f871a8132b44a53be05fdca95bb77a3.png

https://i-blog.csdnimg.cn/direct/fa18060cb2a944e0947ad189d9d2a915.png

https://i-blog.csdnimg.cn/direct/637b6ee23e3a47f495d5be9f25fb8d7d.png

4、创建小程序项目

https://i-blog.csdnimg.cn/direct/8141ebc0f6ee4da7863ecdf93b596ff1.png

https://i-blog.csdnimg.cn/direct/6f6c80cdf2bf471d9c1e99b3ee18ad50.png

https://i-blog.csdnimg.cn/direct/cc8d57ca7e70446bb2a61f0f098af364.png

https://i-blog.csdnimg.cn/direct/b88024335f784d12ad22eed15ade8aef.png

https://i-blog.csdnimg.cn/direct/1d6a147189f9441388f9581b3c46ec5f.png

https://i-blog.csdnimg.cn/direct/4612641939d1404bbab34a6216dd5056.png

5、小程序代码的构成

https://i-blog.csdnimg.cn/direct/d8ea8c9d9d434b38a49359d53a809bf3.png

https://i-blog.csdnimg.cn/direct/f5f2db47af6b45a58a31c51feaf5c2f8.png

5.1json配置文件

https://i-blog.csdnimg.cn/direct/b5a03f2ee9c746f3a23662bf7882ae55.png

https://i-blog.csdnimg.cn/direct/a7e6166e0c744353a6c3ebae4c305498.png

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

https://i-blog.csdnimg.cn/direct/62442da5e49140b0a3a16d37fd35aca1.png

https://i-blog.csdnimg.cn/direct/cfb6a591a4024b4ebfde26d4f2afd490.png

https://i-blog.csdnimg.cn/direct/6b953b2ccddb4fbba6715501c6bed95d.png

https://i-blog.csdnimg.cn/direct/8a7452c405e443beb847aded9f86313f.png

https://i-blog.csdnimg.cn/direct/2ff9067a3f6e47909441f3bae09baaeb.png

5.2WXML模板

1. 什么是WXML

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

2. WXML 和 HTML 的区别

① 标签名称不同

⚫ HTML (div, span, img, a)

⚫ WXML(view, text, image, navigator)

② 属性节点不同

https://i-blog.csdnimg.cn/direct/09d8f8d56edb4787b0d07b5068f6e6ca.png

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

⚫ 数据绑定

⚫ 列表渲染

⚫ 条件渲染

5.3WXSS样式

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

WXSS 和 CSS 的区别

① 新增了 rpx 尺寸单位

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

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

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

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

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

③ WXSS 仅支持部分 CSS 选择器

⚫ .class 和 #id

⚫ element

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

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

5.4JS 逻辑交互

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

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

① app.js

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

② 页面的 .js 文件

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

③ 普通的 .js 文件

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

6、宿主环境简介

https://i-blog.csdnimg.cn/direct/e182fe09e73a4c38993713534c38c51c.png

https://i-blog.csdnimg.cn/direct/c217e0c920214d5e95086ca452fdfeae.png

https://i-blog.csdnimg.cn/direct/f7c7d417bbae42a6bc035acab21e8f54.png

https://i-blog.csdnimg.cn/direct/d1823460d90f47e2a760e19b17ff6acb.png

https://i-blog.csdnimg.cn/direct/54c53d90acd64a5d82f75e9f17cf5d2a.png

https://i-blog.csdnimg.cn/direct/63edb261fd3a48319ec0da6ff885954f.png

https://i-blog.csdnimg.cn/direct/fe8d7319ff824bce81241510a52c9807.png

7、组件

1. 小程序中组件的分类

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

① 视图容器

② 基础内容

③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ map 地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨ 无障碍访问

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

① view

⚫ 普通视图区域

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

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

② scroll-view

⚫ 可滚动的视图区域

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

③ swiper 和 swiper-item

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

https://i-blog.csdnimg.cn/direct/77bd7dd40d784b89a53a044da54f38d8.png

右下角第4段代码解释:

.container1

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

display: flex;:

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

justify-content: space-around

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

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

https://i-blog.csdnimg.cn/direct/fc2fc71381ac4dd985e50851b881c1ad.png

https://i-blog.csdnimg.cn/direct/1ca40c218df4461191444eea2c36699f.png

https://i-blog.csdnimg.cn/direct/fec9429171834171a9d546dfd4c234df.png

https://i-blog.csdnimg.cn/direct/de1a4b63484c4d488b0dbfce935cdda5.png

https://i-blog.csdnimg.cn/direct/45571ea4af64431aac87889dbf1eba58.png

https://i-blog.csdnimg.cn/direct/30b4e50317c04363b1342c7891ecfa17.png

https://i-blog.csdnimg.cn/direct/2e9cb078a97d4cb1a06fef8af6b14dd7.png

https://i-blog.csdnimg.cn/direct/dc454fe7a96241fca802495d28853d4d.png

https://i-blog.csdnimg.cn/direct/fde8b03ff9c943ed8fde345919e52d19.png

https://i-blog.csdnimg.cn/direct/96c988e54ade4ee68321b5863d00e070.png

https://i-blog.csdnimg.cn/direct/01646fb5535046c5b04a62bd1fa5250a.png

8、协同工作

https://i-blog.csdnimg.cn/direct/ed52ac5aa11648c39d4205494e32c91d.png

https://i-blog.csdnimg.cn/direct/b5de3b959cec40f487c07190c2f3f51c.png

https://i-blog.csdnimg.cn/direct/5599a70489cc4407b4f2dcabdcdd9231.png

https://i-blog.csdnimg.cn/direct/b08aea30f12c4e28a064f528df64af70.png

https://i-blog.csdnimg.cn/direct/3c2cff0bf36a4daca0b86fcd9dbf331a.png

https://i-blog.csdnimg.cn/direct/031b59605a8747a3b1f1dddb486b04d1.png

9、发布上线

https://i-blog.csdnimg.cn/direct/be7bbb4cf4b74dffa1e851b23eb2807c.png

https://i-blog.csdnimg.cn/direct/9b5d6bb6877041c8afe58125b60e817d.png

https://i-blog.csdnimg.cn/direct/92c5420ea0f2422987f228221e226e7e.png

https://i-blog.csdnimg.cn/direct/6281c2a4fc3749dd9de6d22763d5cee5.png

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

https://i-blog.csdnimg.cn/direct/a75f0eae3de24bf291477b2a05b67b12.png

https://i-blog.csdnimg.cn/direct/a358a1af74544f6bb1c425d95efd5a49.png

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

关注公众号:小猿搜码

后台发送:csdn小程序**