【Day01】0基础微信小程序入门-学习笔记

于 2024-06-20 22:39:11 发布
阅读量812 收藏 28
点赞数 16
分类专栏： 前端 文章标签： 微信小程序 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46568275/article/details/139844051
版权

文章目录


走过路过不要错过

今日学习目标

  • 如何创建小程序项目

  • 清楚小程序的基本结构、

  • 小程序页面组成

  • 小程序常见组件的使用、

  • 小程序如何协同开发和发布。

小程序简介

1. 小程序和普通网页开发的区别

  • 运行环境不同：小程序运行在微信环境，网页运行在浏览器环境中。

  • 开发模式不同：网页开发模式：浏览器+代码编辑器。小程序的标准开发模式：申请小程序开发账号、安装小程序开发者工具、创建和配置小程序项目。

  • API不同：小程序无法调用DOM和BOM的API，但是可以使用微信环境提供的各种API，例如地理定位、扫码、支付。

2. 体验小程序

手机扫码，是一个官方提供的示例

微信小程序为我们提供了四种能力，分别是：组件、扩展能力、接口、云开发。

在这里插入图片描述

第一个小程序

1.第一个小程序-注册

https://mp.weixin.qq.com/

点击网址 -> 右上角的 立即注册 -> 小程序 ->前往注册

填写账号信息，激活邮箱，登记信息。

注意：主体类型选择个人，填写个人主体信息，下面的二维码使用可作为管理员的微信账号扫码，然后点击继续即可。就注册完成了，跳转到这个页面即小程序管理后台

在这里插入图片描述

获取小程序AppID:

之后开发会用到

在这里插入图片描述

2.第一个小程序-安装开发者工具

官方推荐的小程序开发工具，主要功能是：

  • 快速创建小程序项目
  • 代码的查看和编辑
  • 对小程序功能进行调试
  • 小程序的预览和发布

不推荐使用VSCode

推荐下载稳定版本的，下载网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

在这里插入图片描述

在这里插入图片描述

下载完成后我们开始安装，全部 下一步，等待安装完成即可。可能需要手动配置环境变量，很简单。

在这里插入图片描述

打开开发者工具，页面是这样的，说明安装成功了喔。

微信扫上面的码就可以登录了。扫码成功如下：

在这里插入图片描述

下面我们就可以进行开发了

另，外观和代理设置：

在这里插入图片描述

在这里插入图片描述

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.第一个小程序-创建小程序项目

小程序 -> 新建项目

在这里插入图片描述

完成之后点击新建

这样就创建了一个新的项目了

查看效果方式：1.点击编译器的头部的 编译 按钮，看编译器左侧的效果 2.点击编译旁的预览，手机微信扫码看效果

在这里插入图片描述

主界面的五个组成部分：

在这里插入图片描述

帮助 - 开发者文档 之间定位

设置 - 通用设置 代理快捷键都可以设置

工具 - 构建npm之后可能会使用到

详情 - 项目的一些基本信息

机型建议使用 iphone 6/7/8，比例改为85%

在这里插入图片描述

小程序代码构成

1.小程序代码构成-项目结构

基本组成结构：

​ pages文件夹 : 存放所有小程序页面

​ utils文件夹 ： 存放工具性质的模块（例如格式化时间的自定义模块）

​ app.js : 小程序项目的入口文件

​ app.json : 小程序项目的全局配置文件

​ app.wxss : 小程序项目的全局样式文件

​ project.config.json : 项目的配置文件

​ sitemap.json : 用来配置小澄夕及其页面是否允许被微信索引。

小程序页面组成部分：

在这里插入图片描述

​ 所有的小程序页面，都存放在page目录中，以单独的文件夹存在。

​ 每个页面都由四个基本文件组成，分别是：

​ -.js文件 ：脚本文件，存放页面的数据，事件处理函数

​ -.json文件：当前页面配置文件，配置窗口外观、表现等

​ -.wxml文件：页面的模板结构文件

​ -.wxss文件：当前页面的样式表文件

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

2. 小程序代码构成-JSON文件

app.json是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等

Demo当前的app.json配置内容如下：

在这里插入图片描述

在project.config.json文件中，个性化配置会在这里设置，详情本地设置中选项的修改值会在这个文件中体现。

记住，拿到别人的项目，需要将appid修改，不然会报很多错误。

在这里插入图片描述

在sitemap.json文件，配置小程序页面是否允许微信索引。微信现在开放了小程序内搜索，效果类似于PC网页的SEO。

在这里插入图片描述

控制台默认打开微信索引提示关闭：project.config.json下的setting的checkSiteMap改为false即可。没有该选项可以手动补全。

.json文件存在于每一个单独文件夹中，可对本页的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。

将背景色修改成绿色

在这里插入图片描述

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

在这里插入图片描述

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

"pages": [
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs" 
  ],

在这里插入图片描述

3. 小程序代码构成-WXML模板

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

在这里插入图片描述

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. 小程序代码的构成 - JS逻辑交互

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

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

  • 页面的 .js 文件
    是页面的入口文件，通过调用 **Page()**函数来创建并运行页面

  • 普通的 .js 文件

    封装公共的函数或属性供页面使用。

小程序的宿主环境

1. 简介

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

手机微信是小程序的宿主环境。

在这里插入图片描述

小程序宿主环境包含的内容：通信模型、运行机制、组件、API

2. 通信模型

小程序通信的主体是渲染层和逻辑层。WXML和WXSS在渲染层，JS在逻辑层。

小程序的通信模型分为两部分：逻辑层和渲染层之间通信，逻辑层和第三方服务器通信。均由微信客户端进行转发。

3.运行机制

小程序启动过程：

  • 代码包下载到本地

  • 解析app.json全局配置文件

  • 执行app.js小程序入口文件，调用App()创建小程序实例。

  • 渲染小程序首页

  • 小程序启动完成

页面渲染过程：

  • 加载解析页面的 .json 配置文件
  • 加载页面的.wxml模板和 .wxss 样式
  • 执行页面的 .js 文件，调用 Page()创建页面实例
  • 页面渲染完成

4. 组件

由宿主环境提供的

分类（9类）：视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问

常见的 视图容器 类组件：

  • view

    类似于div元素，是一个块级元素，常用来实现页面的布局效果

  • scroll-view

    可滚动的视图区域，常用来实现滚动列表效果。

  • swiper和swiper-item

    轮播图组件和轮播图item组件

一个小栗子了解view的基本使用：

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

/* pages/list/list.wxss */
.container1 view{
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
background-color:hotpink;
}
.container1 view:nth-child(2){
  background-color: gray;

}
.container1 view:nth-child(3){
  background-color: skyblue;
}
.container1{
  display: flex;
  justify-content: space-around;
}

在这里插入图片描述

一个小栗子了解scroll-view的基本使用：

内容超出一定范围就会发生滚动

纵向滚动scroll-y、横向滚动scroll-x

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

/* pages/list/list.wxss */
.container1 view{
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
background-color:hotpink;
}
.container1 view:nth-child(2){
  background-color: gray;

}
.container1 view:nth-child(3){
  background-color: skyblue;

}
.container1{
  width: 100px;
  height: 120px;
}

可以实现滚动了

1

一个小栗子了解swiper和swiper-item的基本使用

<!--pages/list/list.wxml-->
<swiper>
  <swiper-item class="swiper-container">
    <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>

/* pages/list/list.wxss */
.container1 view{
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
background-color:hotpink;
}
.container1 view:nth-child(2){
  background-color: gray;

}
.container1 view:nth-child(3){
  background-color: skyblue;

}
.container1{
  width: 100px;
  height: 120px;
}
.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightblue;
}
swiper-item:nth-child(2) .item{
  background-color: rgb(8, 0, 85);
}
swiper-item:nth-child(3) .item{
  background-color: lightyellow;
}

在这里插入图片描述

在这里插入图片描述

常用 基础内容 组件

  • text

    文本组件，类似于span，行内元素

  • rich-text

    富文本组件，支持把HTML字符串渲染为WXML结构

一个小栗子了解text的基本使用

text组件的selectable属性，实现长按选中文本内容效果(真机看效果喔)

<view>
手机号支持长按选中效果
    <text selectable>12121212</text>
</view>

一个小栗子了解rich-text的基本使用

通过nodes属性节点，把HTML字符串渲染为对应的UI结构。

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

在这里插入图片描述

其他常用组件

  • button

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

  • image

    图片组件，默认宽300px长240px

  • navigator（后面会学习到，此处省略）

    页面导航组件，类似于a链接

一个小栗子了解button组件的基本使用

<!--pages/list/list.wxml-->
<!-- type指定按钮类型，size="mini"按钮大小，plain按钮是否镂空这三个可以配合使用-->
<button type="primary">主色调</button>
<button type="warn">警告</button>
<button size="mini">主色调</button>
<button type="primary" plain>主色调</button>

在这里插入图片描述

一个小栗子了解image组件的基本使用

通过mode属性指定图片的裁剪和缩放模式，常用的mode属性值如下：

mode 值说明
scaleToFill(默认值)缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

默认mode为scaleToFill

<image src=".." mode="aspectFit"></image>

5. API

由宿主环境提供，通过API，开发者可以方便的调用微信提供的能力，例如获取用户信息、本地存储、支付功能等。

分类（3类）

  • 事件监听API

    on开头，监听某些事件的触发，例如wx.onWindowResize(function callback)监听窗口尺寸变化的事件。

  • 同步API

    Sync结尾，执行结果可通过函数返回值直接获取，执行出错会抛出异常。例如wx.setStorageSync('key','value')向本地存储写入内容。

  • 异步API

    类似于jQuery的$.ajax(options)函数，需要通过success、fall、complete接收调用的结果。比如wx.request()

协调工作和发布

1. 协同工作

一个项目，不同岗位不同角色的员工同时参与设计与开发。

此时出于管理需要，我们需要对不同岗位不同角色的员工的权限进行边界的划分，使得他们可以高效的协同工作。

项目成员的组织结构

在这里插入图片描述

小程序的开发流程

在这里插入图片描述

2.成员管理

成员管理的两个方面

在这里插入图片描述

小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:

  • 项目成员:表示参与小程序开发、运营的成员
    可登录小程序管理后台
    管理员可以添加、删除项目成员，并设置项目成员的角色

  • 体验成员:表示参与小程序内测体验的成员路
    可使用体验版小程序，但不属于项目成员管理员及项目成员均可添加、删除体验成员

不同项目成员对应的权限：

在这里插入图片描述

开发者的权限说明：

  • 开发者权限:可使用小程序开发者工具及对小程序的功能进行代码开发
  • 体验者权限:可使用体验版小程序
  • 登录权限:可登录小程序管理后台，无需管理员确认
  • 开发设置:设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
  • 腾讯云管理权限：云开发设置

如何添加项目成员和体验成员？

在这里插入图片描述

3.小程序版本

开发 -> 测试 -> 正式版

版本阶段说明
开发版本使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
体验版本可以选择某个开发版本作为体验版，并且选取一份体验版。
审核中的版本只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
线上版本线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

4. 发布上线

步骤：

  • 上传代码

    工具栏上传按钮，填写版本号及项目备注

    登录到小程序管理后台 - 管理 - 版本管理 - 开发版本查看刚刚上传的版本。

  • 提交审核

    开发版本的列表，点击提交审核的按钮，填写相关信息即可提交给腾讯官方进行审核。

  • 发布

    收到小程序通过审核的通知，此时在审核版本的列表中，点击“发布”按钮之后，即可把“审核通过”的版本发布为“线上版本”。

基于小程序码进行推广

优点：样式上更具辨识度和视觉冲击力，更清晰树立品牌形象、更好推广小程序

获取小程序码的 5 个步骤:
登录小程序管理后台 ->设置 ->基本设置 ->基本信息 ->小程序码及线下物料下载

查看运营数据的两种方式：

  • 在 “小程序后台查看”：管理后台侧边栏的统计。
  • 使用"小程序数据助手"查看：微信之间搜索这个关键词即可

总结

学完之后，你需要：

能够知道如何创建小程序项目
能够清楚小程序项目的基本组成结构
能够知道小程序页面由几部分组成
能够知道小程序中常见的组件如何使用
能够知道小程序如何进行协同开发和发布

持续更新~
在这里插入图片描述

茹亦如风
关注
  • 16
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序学习day1-30源码
04-23
适用人群：本源码是学习微信小程序day1-30的源码，需要具备一定前端编程基础。以及想要复习或者自学微信小程序的小伙伴。开启新的征程，记录最美好的时刻，每天进步一点点。 能学到什么：1、微信小程序基础知识；2、...
mybatis框架-学习笔记Day01.rar
03-26
本人博客文章《mybatis框架-学习笔记Day01》的相关代码文件本人博客文章《mybatis框架-学习笔记Day01》的相关代码文件本人博客文章《mybatis框架-学习笔记Day01》的相关代码文件本人博客文章《mybatis框架-学习笔记...
最新最全的微信小程序入门学习教程，微信小程序零基础入门到精通
热门推荐
编程小石头
07-24 6万+
从今天开始就来带领大家学习微信小程序了，只要你跟着我一步步来，相信你也可以上线一款属于自己的微信小程序 一，认识小程序 微信⼩程序，简称⼩程序，英⽂名 Mini Program Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现 了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤ 1-1，微信小程序的优势 1.微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾； 2.推⼴app或公众号的成本太⾼。 3.开发适配成本低。 4.容易⼩规 模试错，然后快速迭代。 5.跨平台。
黑马微信小程序开发自学笔记——Day1小程序入门
2302_78698589的博客
01-04 1276
微信小程序
【DRF+Django】微信小程序入门到实战_day01(上)
qq_40979183的博客
06-08 750
# 课程内容 （1）小程序介绍_(略) （2）小程序环境搭建 （3）全局配置 #若有恒何必三更眠五更起 最无益莫过一日曝十日寒 ---教员
【微信小程序】快速入门学习笔记
20岁爱吃必胜客
08-21 132
用完即走，门槛低，流量大。
【DRF+Django】微信小程序入门到实战_day03(下)
qq_40979183的博客
06-17 939
# 课程内容 （1）P28_发送短信验证码流程 （2）P29_腾讯云短信使用
黑马微信小程序开发自学笔记--Day2(上)小程序入门
2302_78698589的博客
01-10 545
因为小程序会把bindtap属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。在小程序中，通过input事件来响应文本框的输入事件。
微信小程序开发day01——小程序的页面基本认识和属性
学习学习学习
10-09 446
微信小程序学习笔记（1） 一、申请个人账号 二、安装开发者工具 三、申请程序 四、阅读帮助文档        1.简单认识基本结构以及页面      app.json【全局配置】 页面路径、界面表现、网络超时时间、底部 tab 等 摘自微信小程序开发者文档的帮助内容： app.json 配置项列表 属性 类型 必填 ...
3小时零基础入门微信小程序开发2024年最新版
编程小石头
04-13 1336
用大白话讲：变量就是一个装东西的盒子再通俗些讲：变量就是用于存放数据的容器，我们通过变量名获取对应的数据。如上图所示，我们的盒子(变量)可以装名字，布尔类型的true，还可以用来装数字。变量的本质：就是在程序的内存中申请一块用来存放数据的空间。对象只是一种特殊的数据。对象是一组无序的相关属性和方法组成。这里重点要记住属性和方法这两个新概念属性：事物的特征，对象里的属性就是用来表现该对象具备哪些特征方法：事物的行为，对象里方法就是用来表示该对象具备哪些行为。
微信小程序 picker-view 组件详解及简单实例
08-31
微信小程序的`picker-view`组件是一个用于创建多列选择器的元素，它允许用户在多个预设选项中进行选择。这个组件通常用于实现日期选择、地区选择等场景，提供了便捷的交互方式。以下是对`picker-view`组件的详细解释...
微信小程序-外卖小程序Demo源码
05-14
微信小程序-外卖小程序Demo源码，含有类似锚点功能
微信小程序——day01.zip
01-09
微信小程序——day01
微信小程序接入lottie动画
u010194271的博客
06-18 371
由Airbnb开发并开源。允许设计师将复杂的矢量动画导出为JSON文件，并通过lottie库在移动应用或者Web上无缝地渲染这些动画。这些动画可以在iOS、Android和Web等多个平台上使用，并且可以以高性能和高质量进行呈现。和传统的GIF、Canvas有什么区别：矢量动画：lottie动画是基于矢量图形的，动画中的所有元素都是以数学形式描述的，可以无限缩放而不会失真。GIF和Canvas动画通常是基于位图的，因此在缩放时可能会失去清晰度。文件大小：相同动画的产生的文件，lottie的更小。
uniapp 微信小程序更改轮播图指示点
qq_61869009的博客
06-17 308
【代码】uniapp 微信小程序更改轮播图指示点。
微信小程序学习（六）：常用原生 API
激洪的博客
06-19 1015
微信小程序学习：常用原生 API
微信小程序---支付
weixin_47808575的博客
06-18 1017
获取订单编号再次请求后端接口，拿到wx.requestPayment()需要的参数。如果没有登录，走前端登录流程，不再赘述。跟自己的后端商议入参，然后获取订单编号。
微信小程序之横向列表展示
最新发布
qq_39772439的博客
06-20 162
【代码】微信小程序之横向列表展示。
微信小程序黑马—day5
05-05
Day5 的主要学习内容是小程序的组件化编程，包括自定义组件和基础组件的使用。 自定义组件是指开发者可以根据自己的业务需求，自定义一些组件，使得小程序更加符合自己的需求。开发者可以通过 WXML、WXSS 和 JS 文件，编写自定义组件的代码。 基础组件是小程序提供的一些常用组件，如按钮、输入框、轮播图等。开发者可以直接使用这些组件，避免重复造轮子，提高开发效率。 在学习自定义组件时，需要掌握组件的生命周期函数，包括 created、attached、ready、moved 和 detached 等。这些函数可以让开发者在组件不同的生命周期阶段执行不同的操作，比如在 attached 函数中进行数据初始化，在 ready 函数中进行界面渲染等。 在学习基础组件时，需要掌握组件的属性和事件。组件的属性可以通过数据绑定进行传递，比如给按钮组件设置一个 text 属性，控制按钮的文本显示。组件的事件可以通过绑定事件处理函数进行响应，比如给按钮组件绑定一个 tap 事件，响应用户的点击操作。 总的来说，组件化编程是小程序开发中非常重要的一部分，可以使得开发更加灵活和高效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值