微信小程序开发 小白入门篇

这篇具有很好参考价值的文章主要介绍了微信小程序开发 小白入门篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序内容简介

  • 能够知道如何创建小程序项目
    • 微信开发者工具的使用、appID 的获取
  • 能够清楚小程序项目的基本组成结构
    • app.js、app.json、app.wxss、pages 文件夹
  • 能够知道小程序页面由几部分组成
    • wxml、wxss、json、js
  • 能够知道小程序中常见的组件如何使用
    • view、text、image
  • 能够知道小程序如何进行协同开发和发布
    • 成员管理、发布小程序、查看运营数据

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

1.运行环境不同

  • 网页运行在浏览器环境中
  • 小程序运行在微信环境中

2.API不同

由于运行环境的不同,所以小程序中无法调用 DOM 和 BOM 的 API。但是,小程序中可以调用微信环境提供的各种 API,例如:地理定位、扫码、支付

3.开发模式不同

  • 网页的开发模式: 浏览器 + 代码编辑器
  • 小程序有自己的一套标准开发模式
    • 申请小程序开发账号
    • 安装小程序开发者工具
    • 创建和配置小程序项目

微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:

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

 微信小程序开发入门,微信小程序,小程序


1.项目基本组成结构

  1. pages 用来存放所有小程序的页面
  2. utils 用来存放工具性质的模块 (例如:格式化时间的自定义模块)
  3. app.js 小程序项目的入口文件
  4. app.json 小程序项目的全局配置文件
  5. app.wxss小程序项目的全局样式文件
  6. project.config.json 项目的配置文件
  7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

小程序页面的组成部分

小程序官方建议把所有小程序的页面,都存放在 pages 目录中,以单独的文件夹存在,如图所示:

微信小程序开发入门,微信小程序,小程序

 其中,每个页面由 4 个基本文件组成,它们分别是

  1. .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等)
  2. .json 文件(当前页面的配置文件,配置窗口的外观、表现等)
  3. .wxml文件(页面的模板结构文件)
  4. .wxss 文件(当前页面的样式表文件

2.JSON 配置文件

 (1)JSON配置文件的作用

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

小程序项目中有 4种json 配置文件,分别是

  1. 项目根目录中的 app.json 配置文件
  2. 项目根目录中的 project.config.json 配置文件
  3. 项目根目录中的sitemap.json 配置文件
  4. 每个页面文件夹中的 .json 配置文件

(2)app.json 文件

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。Demo项目里边的app.json 配置内容如下:微信小程序开发入门,微信小程序,小程序

 简单了解下这4个配置项的作用:

  1. pages: 用来记录当前小程序所有页面的路径
  2. window: 全局定义小程序所有页面的背景色、文字颜色等
  3. style: 全局定义小程序组件所使用的样式版本
  4. sitemapLocation: 用来指明 sitemap.json 的位置

(3)project.config.json 文件

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

  • setting 中保存了编译相关的配置
  • projectname 中保存的是项目名称
  • ·appid 中保存的是小程序的账号 ID

(4)sitemapjson 文件 

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

当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。微信小程序开发入门,微信小程序,小程序

 ⭕注意: sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false。


(5)页面的 json 配置文件

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

微信小程序开发入门,微信小程序,小程序


(6)新建小程序页面

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

微信小程序开发入门,微信小程序,小程序


(7)修改项目首页

 只需要调整 app.json --> pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染,如图所示:微信小程序开发入门,微信小程序,小程序


3.小程序页面

(1)WXML

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

⭕WXML和 HTML的区别

①标签名称不同

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

②属性节点不同

  • <a href = "#" > 超链接</a>
  • <navigator url="/pages/home/home"></navigator>

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

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

(2)WXSS

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

WXSS和 CSS 的区别

①新增了 rpx 尺寸单位

  • CSS中需要手动进行像素单位换算,例如 rem
  • WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

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

  • 项目根目录中的app.wxss 会作用于所有小程序页面
  • 局部页面的.wxss样式仅对当前页面生效

③WXSS 仅支持部分 CSS 选择器

  • .class和#id
  • element
  • 并集选择器、后代选择器
  • ::after和::before 等伪类选择器

(3)JS 逻辑交互

1.小程序中的.js 文件

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

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

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

①app.js

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

②页面的.js文件

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

③普通的.js文件

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


4.宿主环境

(host environment) 指的是程序运行所必须的依赖环境。例如:Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在i0s 环境下运行的,所以Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的! 微信小程序开发入门,微信小程序,小程序

手机微信是小程序的宿主环境,如图所示

小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码、微信支付、微信登录、地理定位、etc...

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

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

①通信模型

1.通信的主体

小程序中通信的主体是 渲染层 和 逻辑层,其中

(1)WXML模板和WXSS样式工作在染层

(2)JS脚本工作在逻辑层

2.小程序中的通信模型分为两部分:

(1)渲染层 和 逻辑层 之间的通信

  • 由微信客户端进行转发

(2)逻辑层 和 第三方服务器 之间的通信

  • 由微信客户端进行转发

微信小程序开发入门,微信小程序,小程序


②运行机制

小程序启动的过程

  1. 把小程序的代码包下载到本地
  2. 解析app.json 全局配置文件
  3. 执行 app.js 小程序入口文件,调用 App( ) 创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成

页面渲染的过程

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

③组件

小程序中组件的分类

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

  1. 视图容器
  2. 基础内容
  3. 表单组件
  4. 导航组件
  5. 媒体组件
  6.  map 地图组件
  7. canvas 画布组件
  8. 开放能力
  9. 无障碍访问

④常用的视图容器类组件

1️⃣view

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

2️⃣scroll-view

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

3️⃣swiper 和 swiper-item

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

⑤view组件的基本使用 

微信小程序开发入门,微信小程序,小程序 微信小程序开发入门,微信小程序,小程序

 ✍🏻轮播图效果:

 微信小程序开发入门,微信小程序,小程序


⑥swiper 组件的常用属性

属性

类型

默认值

说明

indicator-dots

boolean

false

是否显示面板指示点

indicator-color

color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

color

#000000

当前选中的指示点颜色

autoplay

boolean

false

是否自动切换

interval

number

5000

自动切换时间间隔

circular

boolean

false

是否采用衔接滑动


常用的基础内容组件

1️⃣text

  • 文本组件
  • 类似于HTML中的span 标签,是一个行内元素

text 组件的基本使用

通过 text 组件的 selectable user-select属性,实现长按选中文本内容的效果:

 微信小程序开发入门,微信小程序,小程序

selectable用user-select代替

2️⃣rich-text

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

rich-text 组件的基本使用

通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串染为对应的 UI 结构

微信小程序开发入门,微信小程序,小程序


⑧其它常用组件

1️⃣button

  • 按钮组件
  • 功能比HTML中的 button 按钮丰富
  • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

button 按钮的基本使用

微信小程序开发入门,微信小程序,小程序

2️⃣image

  • 图片组件
  • image组件默认宽度约 300px、高度约240px

image组件的 mode 属性

image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:

mode 值

说明

scaleToFill

(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

aspectFit

缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来

aspectFill

缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

widthFix

缩放模式,宽度不变,高度自动变化,保持原图宽高比不变缩

heightFix

缩放模式,高度不变,宽度自动变化,保持原图宽高比不变


3️⃣navigator

  • 页面导航组件
  • 类似于HTML中的a链接

4️⃣API概述

小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 AP1,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。


5.小程序API的3大分类

 小程序官方把 API分为了如下3大类:

①事件监听 API

  • 特点: 以 on 开头,用来监听某些事件的触发
  • 举例: wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

②同步 API

  • 特点1:以Sync 结尾的API 都是同步 API
  • 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
  • 举例: wx.setStorageSync(key,value)向本地存储中写入内容

③异步 API

  • 特点: 类似于jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
  • 举例:wx.request( )发起网络数据请求,通过success 回调函数接收数据

6.协同工作

(1)了解权限管理需求

在中大型的公司里,人员的分工非常仔细:同一个小程序项目,一般会有不同岗位、不同角色的员工同时参与设计与开发。

此时出于管理需要,我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分使他们能够高效的进行协同工作。

(2)了解项目成员的组织结构

微信小程序开发入门,微信小程序,小程序

(3)小程序的开发流程

微信小程序开发入门,微信小程序,小程序


📜小程序成员管理

1.成员管理的两个方面

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

 微信小程序开发入门,微信小程序,小程序

①项目成员:

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

②体验成员

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

2.不同项目成员对应的权限

微信小程序开发入门,微信小程序,小程序

3.开发者的权限说明

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

4.添加项目成员和体验成员


小程序的版本

1.软件开发过程中的不同版本

在软件开发过程中,根据时间节点的不同,会产出不同的软件版本,例如:

①开发者编写代码的同时,对项目代码进行自测(开发版本)

②直到程序达到一个稳定可体验的状态时,开发者把体验版本给到产品经理和测试人员进行体验测试

③最后修复完程序的 Bug 后,发布正式版供外部用户使用

2.小程序的版本

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

7.发布上线

1.小程序发布上线的整体步骤

一个小程序的发布上线,一般要经过 上传代码 -> 提交审核 -> 发布 这三个步骤。

①上传代码

  • 点击开发者工具顶部工具栏中的“上传” 按钮
  • 填写版本号以及项目备注

在后台查看上传之后的版本

登录小程序管理后台 -> 管理 -> 版本管理 -> 开发版本,即可查看刚才提交上传的版本了。

②提交审核

  • 为什么需要提交审核:为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过腾讯官方审核的。
  • 提交审核的方式:在开发版本的列表中,点击“提交审核”按钮之后,按照页面提示填写相关的信息,就能把小程序提交到腾讯官方进行审核。

③发布

审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时在审核版本的列表中,点击“发布”按钮之后,即可把“审核通过”的版本发布为“线上版本”,供所有小程序用户访问和使用。


基于小程序码进行推广

相对于普通二维码来说,小程序码的优势如下:

  1. 在样式上更具辨识度视觉冲击力
  2. 能够更加清晰地树立小程序的品牌形象
  3. 可以帮助开发者更好地推广小程序

获取小程序码的5个步骤

登录小程序管理后台 -> 设置 -> 基本设置 -> 基本信息 -> 小程序码及线下物料下载


查看小程序运营数据的两种方式

①在“小程序后台”查看

1.登录小程序管理后台

2.点击侧边栏的“统计'

3.点击相应的 tab可以看到相关的数据

②使用“小程序数据助手”查看

1.打开微信

2.搜索“小程序数据助手'

3.查看已发布的小程序相关的数据文章来源地址https://www.toymoban.com/news/detail-770177.html


到了这里,关于微信小程序开发 小白入门篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 | 小程序开发

    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、认识小程序开发 什么是小程序? 各个平台小

    2024年01月24日
    浏览(64)
  • 微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(59)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(64)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用,印象中需要小程序ID,去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载,我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(62)
  • 基于微信小程序的新闻资讯的小程序开发

    随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,新闻资讯被用户普遍使用,为方便用户能够可以随时进行新闻资讯的数据信息管理,特开发了基于新闻资讯的

    2024年02月03日
    浏览(52)
  • 微信小程序实战:智能水印相机小程序开发附源码

    一款智能水印相机,拍照自动添加时间、地点、经纬度等水印文字,可用于工作考勤、学习打卡、工作取证等,支持自定义内容以及给现有照片添加水印。无需安装,无需注册,即开即用。 主要是通过canvas给图片上添加上时间水印地点信息。首先通过官方API(chooseLocation)获取

    2024年02月09日
    浏览(67)
  • 微信小程序开发:探索微信小程序的生命周期

    微信小程序作为一个轻量级的应用,逐渐成为企业和开发者的热门选择。在本篇博文中,我们将深入剖析微信小程序的生命周期,带领大家一起探索这个神秘世界,揭开它的面纱。 本文将覆盖以下内容: 微信小程序生命周期概述 全局 App 对象的生命周期 页面 Page 对象的生命

    2024年02月10日
    浏览(67)
  • 微信小程序开发系列(三)·微信小程序页面的创建、小程序如何更改调试基础库

    零基础手把手教你创建微信小程序(一)·微信小程序开发账号的注册以及开发者工具的安装和使用-CSDN博客 零基础手把手教你创建微信小程序(二)·创建第一个微信小程序以及了解小程序代码的构成-CSDN博客 目录 1.  小程序页面的创建 1.1  方法一 1.2  方法二 2.  小程序如

    2024年04月26日
    浏览(57)
  • 网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

    我们都知道微信小程序是无法直接打开网址的。 这个小程序源码提供了一种将网址直接打包成微信小程序的方法, 使得用户可以在微信小程序中直接访问这些网址内容。 这个源码没有进行加密,可以直接查看和修改。 将下面代码中的网站改成你的就行了,简单易用 蓝奏云

    2024年04月10日
    浏览(54)
  • 微信小程序开发|基于微信小程序的健身陪练系统的设计与实现

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包