【微信小程序前端开发】入门Day01 —— 小程序页面组成、组件使用及协同开发发布指南

news2024/12/24 11:28:45

小程序的项目结构

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

小程序页面由几部分组成

 

小程序页面由 4 个基本文件组成:

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

小程序中常见的组件如何使用

 
  1. 视图容器类组件
    • view:普通视图区域,类似于 HTML 中的 div,是一个块级元素,常用来实现页面的布局效果。
    • scroll-view:可滚动的视图区域,常用来实现滚动列表效果。
    • swiper 和 swiper-item:轮播图容器组件和轮播图 item 组件。
  2. 基础内容组件
    • text:文本组件,类似于 HTML 中的 span 标签,是一个行内元素,通过 selectable 属性可实现长按选中文本内容的效果。
    • rich-text:富文本组件,支持把 HTML 字符串渲染为 WXML 结构。
  3. 其他常用组件
    • button:按钮组件,功能比 HTML 中的 button 按钮丰富,通过 open-type 属性可以调用微信提供的各种功能。
    • image:图片组件,默认宽度约 300px、高度约 240px,其 mode 属性可指定图片的裁剪和缩放模式。
 

小程序如何进行协同开发和发布

 

协同开发

 
  1. 了解权限管理需求:中大型公司里,同一小程序项目会有不同岗位、角色的员工参与,需对权限进行划分。
  2. 了解项目成员的组织结构:包括项目管理者、产品组、设计组、开发组、测试组。
  3. 小程序的开发流程:产品组提需求,设计组出方案,开发组开发,测试组测试,最后发布。
  4. 小程序成员管理
    • 成员管理的两个方面:项目成员(参与开发、运营,可登录管理后台,管理员可添加、删除并设置角色)和体验成员(参与内测体验,可使用体验版小程序,管理员及项目成员均可添加、删除)。
    • 不同项目成员对应的权限:如运营者、开发者、数据分析者各有不同权限。
    • 添加项目成员和体验成员:管理员可在后台添加。
 

发布

 
  1. 小程序的版本
    • 开发版本:使用开发者工具上传代码,可自测,可删除,不影响线上和审核中版本。
    • 体验版本:可选择开发版本作为体验版。
    • 审核中的版本:只能有一份代码处于审核中,有审核结果后可发布或重新提交审核。
    • 线上版本:线上用户使用的版本,新版本发布后会被覆盖更新。
  2. 发布上线的步骤
    • 上传代码:点击开发者工具顶部的 “上传” 按钮,填写版本号和项目备注。
    • 提交审核:在开发版本列表中点击 “提交审核” 按钮,按提示填写信息后提交给腾讯官方审核。
    • 发布:审核通过后,在审核版本列表中点击 “发布” 按钮,将审核通过的版本发布为线上版本。
  3. 运营数据查看
    • 在 “小程序后台” 查看:登录后台,点击侧边栏的 “统计”,再点击相应 tab 查看数据。
    • 使用 “小程序数据助手” 查看:打开微信,搜索 “小程序数据助手”,查看已发布小程序相关数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2181059.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

理解线程库和线程排斥(锁)

理解线程库 线程要有独立属性 a.独立栈结构 b.寄存器中的上下文 在进程地址库内,维护栈的设备只有一套,如何保证线程都有独立栈? 每个新线程的栈由库维护,库会在堆上开辟一段空间。 默认地址空间的栈由主线程使用 如何理解pt…

SpringBoot框架下体育馆管理系统的构建

1引言 1.1课题背景 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理,这正是计算机被广泛应用于信息管理系统的环境。计算机的最大好处在于利用它能够进行信息管理。使用计算机进行信息控制,不仅提高了工作效率,而且大大的提高了其…

被Karpathy誉为“蕴藏着类似ChatGPT的机会的AI产品Notebook LM”,它到底做对了什么?

就在昨天,Karpathy在X上连续发布了多条安利帖,强烈地给大家推荐一个AI产品NotebookLM。 嘶~给周围人疯狂种草并不稀奇,但Karpathy的推荐理由给NotebookLM戴了一个高帽子-他提到这款产品让人联想到ChatGPT。 这种就令人好奇&#…

线性模型到神经网络

🚀 在初始神经网络那一节(链接如下:初始神经网络)的最后,我们通过加大考虑的天数使得我们最后得到的模型Loss最终停留在了0.32k,当我们在想让模型更加准确的时候,是做不到的,因为我们…

论文的研究工具有什么?推荐5款AI论文写作网站

在当今的学术研究和写作领域,AI工具已经成为不可或缺的助手。这些工具不仅能够提高写作效率,还能帮助研究者生成高质量的论文。以下是一些值得推荐的AI论文写作工具: 千笔-AIPassPaper 千笔-AIPassPaper是一款基于深度学习和自然语言处理技…

太速科技-FMCJ457-基于JESD204B的2路2Gsps AD 2路2Gsps DA FMC子卡

FMCJ457-基于JESD204B的2路2Gsps AD 2路2Gsps DA FMC子卡 一、板卡概述 该子卡是高速AD9172 DAC和AD9689 ADC的FMC板。为客户提供高达2 GHz 的可用模拟带宽以及 JESD204B 接口,以快速地对各种宽带 RF 应用进行原型制作。 AD芯片AD9689,AD9689-2…

【技能提升get!技术策划进阶指南】

** 技能提升get! 技术策划进阶指南 ** 技术策划扮演着游戏开发团队中的关键角色,需要在复杂的系统中找到最优的技术方案。 本文将全面介绍技术策划的职位定义、日常工作、重要作用以及成长路径,让大家全方位了解这个影响游戏质量的重要岗位。 点击蓝链领取游戏…

golang小项目1-家庭收支记账系统

项目地址:golang小项目 参考资料:尚硅谷golang教程P229 家庭收支记账系统 1. 系统简介 1.1 项目背景 在现代社会中,家庭的财务管理显得尤为重要。随着生活成本的不断上升,家庭需要有效地记录和分析收支情况,以确保…

【Linux】进程概念-2

文章目录 1.环境变量1.1 基本概念1.2 常见环境变量1.3 查看环境变量方法1.4 测试PATH1.5 测试HOME1.6 和环境变量相关的命令1.7 环境变量的组织方式1.8 通过代码如何获取环境变量1.9 通过系统调用获取或设置环境变量1.10 环境变量通常是具有全局属性的 1.环境变量 1.1 基本概念…

李宏毅机器学习2023-HW10-Adversarial Attack

文章目录 TaskBaselineFGSM (Fast Gradient Sign Method (FGSM)I-FGSM(Iterative Fast Gradient Sign Method)MI-FGSM(Momentum Iterative Fast Gradient Sign Method)M-DI2-FGSM(Diverse Input Momentum Iterative Fast Gradient Sign Method) Reportfgsm attackJepg Compress…

【LeetCode HOT 100】详细题解之链表篇

LeetCode HOT 100题解之链表篇 160 相交链表题目分析代码 206 反转链表方法一:迭代 234 回文链表方法一:将值复制到数组中方法二:快慢指针 141 环形链表方法一:哈希表方法二:快慢指针 142 环形链表II方法一&#xff1a…

读代码UNET

这个后面这个大小怎么算的,这参数怎么填,怎么来的? 这是怎么看怎么算的? 这些参数设置怎么设置?卷积多大,有什么讲究?

机器学习:opencv--摄像头OCR

目录 前言 一、三个函数 1.显示图像 2.点排序 3.透视变换 二、代码实例 1.打开摄像头 2.图像预处理 3.检测特定轮廓 4.对轮廓进行处理 5.释放资源 前言 摄像头OCR指的是利用摄像头捕捉图像中的文字信息,并通过光学字符识别(OCR)技…

遥感图像文本检索

遥感图像文本检索是一种通过自然语言描述,从大量遥感图像中搜索与之相关的图像的技术。它用于遥感解释任务中,帮助用户根据文字描述快速找到符合条件的遥感图像,这在城市规划、环境监测、灾害管理等领域具有重要应用意义。 实现这一技术的核…

【刷点笔试面试题试试水】#ifndef和#ifdef有什么区别?

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: #include <iostream> using namespace std;#define DEBUGint…

828华为云征文|华为云Flexus X实例性能实测:速度与稳定性的完美结合

828华为云征文&#xff5c;华为云Flexus X实例性能实测&#xff1a;速度与稳定性的完美结合 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、实践环境介绍2.1 本次实践环境规划2.2 本次实践介绍 …

828华为云征文|华为云Flexus云服务器X实例部署——盲盒抽奖商城系统以及编译发布小程序

盲盒抽奖商城系统使用 thinkphp6.0 uniapp 开发&#xff0c;做到了全移动端兼容。一个系统不仅可以打包 小程序 还可以 打包APP &#xff0c;H5 华为云Flexus云服务器X实例在安装搭建盲盒商城小程序方面具有显著优势&#xff0c;这些优势主要体现在以下几个方面&#xff1a; …

OpenGL ES 着色器(5)

OpenGL ES 着色器(5) 简述 着色器是在GPU上运行的程序&#xff0c;它会对每一个点都执行一次程序&#xff0c;并且计算出每个像素需要渲染的颜色&#xff0c;我们主要关注着色器的怎么传递数据&#xff0c;在OpenGL ES中&#xff0c;着色器传递数据分几种场景&#xff0c;一种…

软件设计师——计算机网络

&#x1f4d4;个人主页&#x1f4da;&#xff1a;秋邱-CSDN博客☀️专属专栏✨&#xff1a;软考——软件设计师&#x1f3c5;往期回顾&#x1f3c6;&#xff1a;&#x1f31f;其他专栏&#x1f31f;&#xff1a;C语言_秋邱 一、OSI/ RM七层模型(⭐⭐⭐) ​ 层次 名称 主要功…

Jetbrains 推出 CodeCanvas:云开发时代的未来已来

人们不大愿意相信事实 只愿意相信故事 你信仰什么 就会怎样生活 近期 jetbrains 悄悄的推出了新的产品 CodeCanvas&#xff0c;这个产品的推出具有划时代的意义。 CodeCanvas 的定位是一个云 IDE 。想一想 jetbrains 从 2000 年开始就专注于 IDE 的开发&#xff0c;准确来说是…