零基础手把手教你创建微信小程序(二)·创建第一个微信小程序以及了解小程序代码的构成

零基础手把手教你创建微信小程序(一)·微信小程序开发账号的注册以及开发者工具的安装和使用-CSDN博客

目录

​编辑

1.  创建微信小程序

1.1  基本信息

1.2  在模拟器上查看项目效果

1.3  在真机上预览项目效果

1.4  主界面的5个组成部分

1.4.1  菜单栏的使用

1.4.2  工具栏的使用

1.4.3  模拟器的使用

1.4.4  代码编辑区的使用

1.4.5  调试区的使用

2.  小程序代码的构成

2.1  了解项目的基本组成结构

2.2  小程序页面到的组成部分


1.  创建微信小程序

1.1  基本信息

        打开“微信开发者工具”软件,进入如下界面,点击“加号”按钮:

        “项目名称”自己起一个名字,目录最好进行更改不要放到C盘内,AppID,参考本文首页的第一章链接中的“获取小程序的AppID”,后端服务选择“不使用云服务”,点击“模板选择”的“全部分类”按钮,选择不使用模板,后点击确定。

进入到如下界面:

1.2  在模拟器上查看项目效果

        在界面上,找到“编译”按钮,点击编译,即可查看,如下图:

1.3  在真机上预览项目效果

在界面找到“预览”按钮,点击,扫描弹出的二维码

可在手机上看见如下界面(需要注意,现在只能用注册开发者工具的微信账号进行扫描):

1.4  主界面的5个组成部分

1.4.1  菜单栏的使用

        在开发过程中,要想快速查找小程序的使用文档,或者组件的使用文档可以通过菜单栏的“开发者文档”快速查找。

1.4.2  工具栏的使用

        可以通过对这三个按钮的点击,实现对模拟器、编译器、调试器的隐藏和显现。

        “编译”和“预览”可以参考本章1.2和1.3。

        通过点击“详情”按钮,可以了解到,开发的小程序的基本信息、性能质量、本地设置、项目配置等。

1.4.3  模拟器的使用

        对于机型建议选择如下机型,不建议选择iPone 5。

1.4.4  代码编辑区的使用

        在此界面进行相关代码的编辑:

1.4.5  调试区的使用

2.  小程序代码的构成

2.1  了解项目的基本组成结构

①  pages 用来存放所有小程序的页面

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

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

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

⑤  project.config.json 项目的配置文件

⑥  sitemap.json 用来配置小程序及其页面是否允许被微信索引

⑦  components 用来存放每个页面的公共组件的

2.2  小程序页面到的组成部分

        页面文件时每个页面所需的文件,小程序页面文件都存放在pages目录下,一个页面一个文件夹。

        每个页面通常由四个文件组成,每个文件只对当前页面有效:

①  .js:页面逻辑

②  .json:小页面配置

③ .wxml:页面结构

④  .wxss:页面样式

注意:.js文件和.wxml文件是必须的

        小程序目前有两种渲染模式,一种Skyline渲染模式,一种WebView渲染模式,不过Skyline渲染模式属于新的渲染模式不是非常的稳定,可以给改为WebView渲染模式。

        更改方式,在app.json文件中找到:

  "renderer": "skyline","rendererOptions": {"skyline": {"defaultDisplayBlock": true,"disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}},"componentFramework": "glass-easel",

        将其删除,保存或者编译即可。

微信小程序开发_时光の尘的博客-CSDN博客

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

本博客工程源码总目录----方便你快速找到自己喜欢的项目

目录 1、前言2、本人项目总分类3、FPGA图像处理类项目-->快速查找3.1、图像采集-->MIPI视频类3.2、图像采集-->SDI视频类3.3、图像采集-->PAL视频类3.4、图像采集-->Cmeralink视频类3.5、图像转换-->LVDS视频转换3.6、图像缩放(纯Verilog版本HLS版…

六、回归与聚类算法 - 模型保存与加载

目录 1、API 2、案例 欠拟合与过拟合线性回归的改进 - 岭回归分类算法:逻辑回归模型保存与加载无监督学习:K-means算法 1、API 2、案例

2024年最值得尝试的创业项目,利用信息差,普通人下班也能做

大家好,我是电商花花。 到了2024年,人们依然在寻找长期可靠的副业项目,但我建议暂时停一下,因为抖音小店这个轻松暴利的副业项目还在等着我们呢。 抖音小店无货源创业项目作为一个轻资产创业项目,操作简单&#xff0…

Spring基础之AOP和代理模式

文章目录 理解AOPAOP的实现原理 AOP代理模式静态代理动态代理1-JDK动态代理2-CGLIB动态代理 总结 理解AOP OOP - - Object Oriented Programming 面向对象编程 AOP - - Aspect Oriented Programming 面向切面编程 AOP是Spring提供的关键特性之一。AOP即面向切面编程&#xff0…

yolov9目标检测报错AttributeError: ‘list‘ object has no attribute ‘device‘

最近微智启软件工作室在运行yolov9目标检测的detect.py测试代码时,报错: File “G:\down\yolov9-main\yolov9-main\detect.py”, line 102, in run pred non_max_suppression(pred, conf_thres, iou_thres, classes, agnostic_nms, max_detmax_det) Fil…

探索设计模式的魅力:状态模式揭秘-如何优雅地处理复杂状态转换

​🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》 💪🏻 制定明确可量化的目标,并且坚持默默的做事。 探索设计模式的魅力:状态模式揭秘-如何优雅地处理复杂状态转换 文章目录 一、案例…

Yolo v9 “Silence”模块结构及作用!

论文链接:👿 YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information 代码链接:👿 https://github.com/WongKinYiu/yolov9/tree/main Silence代码 class Silence(nn.Module):def __init__(self):supe…

数据价值在线化丨TiDB 在企查查数据中台的应用及 v7.1 版本升级体验

本文介绍了企查查在数据中台建设中使用 TiDB 的经验和应用。通过从 MySQL 到 TiDB 的迁移,企查查构建了基于 TiDB Flink 的实时数仓框架 ,充分利用了 TiDB 的分布式架构、MySQL 兼容性和完善的周边工具等特性,实现了数据的在线化处理。2023 年…

智慧校园的未来已来!AI与数字孪生领航教育新时代

随着科技的飞速发展,人工智能(AI)和数字孪生技术正逐渐渗透到我们生活的方方面面,而在教育领域,它们的结合更是催生出一种全新的智慧校园模式。这种模式的出现,不仅预示着教育管理方式的彻底变革&#xff0…

ant-design-charts 对带缩略轴柱状图 根据数据自定义列处理, 以颜色为例

摘要 本文主要对ant-design-charts中带缩略柱状图进行自定义列处理 ant-design-charts版本:1.4.2 1、定义数据 const data1 [{"a": "七台河","b": 52827.32,c: 2},{"a": "万县","b": 20000,c: 1},…

python程序设计基础:文件操作

第七章:文件操作 为了长期保存数据以便重复使用、修改和共享,必须将数据以文件的形式存储到外部存储介质(如磁盘、U盘、光盘或云盘、网盘、快盘等)中。 文件操作在各类应用软件的开发中均占有重要的地位: 管理信息系统是使用数据库来存储数据的,而数据库最终还是…

flink watermark 生成机制与总结

flink watermark 生成机制与总结 watermark 介绍watermark生成方式watermark 的生成值算法策略watermark策略设置代码 watermark源码分析watermark源码调用流程debug(重要)测试思路 迟到时间处理FlinkSql 中的watermark引出问题与源码分析 watermark 介绍…