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

零基础手把手教你创建微信小程序(一)·微信小程序开发账号的注册以及开发者工具的安装和使用-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://xiahunao.cn/news/2805979.html

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

相关文章

NPM私服搭建(verdaccio)

官网地址:https://verdaccio.org/ 概述 Verdaccio 是一个流行的 Node.js 包管理器的代理工具,它允许您在本地或私有网络上轻松地创建和管理 npm 包仓库。通过 Verdaccio,开发团队可以建立自己的 npm 包仓库,以更好地控制和管理其依…

【力扣】Z 字形变换,模拟 + 直接构造

Z 字形变换原题地址 方法一:利用二维矩阵模拟 对于特殊情况,Z 字形变换后只有一行或只有一列,则变换后的字符串和原字符串相同。 对于一般情况,我们可以考虑按照题目要求,把字符串按照 Z 字形存储到二维数组中&…

做抖店想要快速起店怎么办?产品和流量是关键!新手可收藏!

大家好,我是电商小布。 在抖音小店开通完成后,大家考虑的第一件事情,一定是小店如何能够快速出单,成功起店。 店铺出单的重点,其实就在小店的运营上。 那么这么多的环节,关键点在哪呢? 答案…

大学生多媒体课程学习网站thinkphp+vue

开发语言:php 后端框架:Thinkphp 前端框架:vue.js 服务器:apache 数据库:mysql 运行环境:phpstudy/wamp/xammp等开发背景 (一) 研究课程的提出 (二)学习网站的分类与界定…

前端页面之间传输数据 localStorage

效果 发送方 接收方 localStorage 的使用 // 保存数据 localStorage.setItem(key, value); // 获取数据 localStorage.getItem(key);发送方 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登录<…

【深蓝学院】移动机器人运动规划--第6章 模型预测控制(MPC)与运动规划--笔记

0. Outline 1. Reactive Control&#xff08;反应式控制&#xff09; 控制学中的 “Reactive Control” 通常指的是一种控制策略&#xff0c;它依赖于系统对特定事件或变化的即时反应&#xff0c;而不是按照预定的计划或策略行动。这种控制往往是基于当前的传感器输入来做出决…

c编译器学习07:minilisp编译器改造(debug模式支持调试)

问题 原版的minilisp编译器不支持argv输入测试&#xff0c;不方便单步调试。 代码改造目标是既不改变原有程序的各种功能&#xff0c; 又能支持个人习惯的vs单步debug模式。 CMakeLists.txt变更 定义DEBUG宏 解决单步调试源码定位偏差问题 cmake_minimum_required(VERSION …

【Android安全】Windows 环境下载 Android 源码

准备环境 安装 git 安装 Python 硬盘剩余容量最好大于 100G 打开 Git Bash&#xff0c;用 git 克隆源代码仓库 git clone https://android.googlesource.com/platform/manifest.git //没有梯子使用清华源 git clone https://aosp.tuna.tsinghua.edu.cn/platform/manifest.git…

RabbitMQ 部署方式选择

部署模式 RabbitMQ支持多种部署模式&#xff0c;可以根据应用的需求和规模选择适合的模式。以下是一些常见的RabbitMQ部署模式&#xff1a; 单节点模式&#xff1a; 最简单的部署方式&#xff0c;所有的RabbitMQ组件&#xff08;消息存储、交换机、队列等&#xff09;都运行在…

TensorRT及CUDA自学笔记003 NVCC及其命令行参数

TensorRT及CUDA自学笔记003 NVCC及其命令行参数 各位大佬&#xff0c;这是我的自学笔记&#xff0c;如有错误请指正&#xff0c;也欢迎在评论区学习交流&#xff0c;谢谢&#xff01; NVCC是一种编译器&#xff0c;基于一些命令行参数可以将使用PTX或C语言编写的代码编译成可…

新手如何自己建网站的详细步骤?-网站建设

新手如何自己建网站的详细步骤&#xff1f;-网站建设 我们选择了白嫖雨云的二级域名 浏览器输入https://www.rainyun.com/z22_ 创建账号然后选择一个你喜欢的子域名我建议后缀选择ates.top的 选择自定义地址&#xff0c;类型选择cname 现在要选择记录值了&#xff0c;有a&…

linux内核原理--页高速缓存,回写,页框回收

1.页高速缓存 我们主要分析下磁盘文件的页高速缓存 struct address_space {struct inode *host; struct radix_tree_root page_tree; spinlock_t tree_lock;unsigned int i_mmap_writable;struct prio_tree_root i_mmap; struct list_head i_mmap_nonlinear;spinlock_t i_…

2023最新简绘AI开源版支持MJ绘画,AI问答

应用介绍 本文来自&#xff1a;2023最新简绘AI开源版支持MJ绘画&#xff0c;AI问答 - 源码1688 简介&#xff1a; 简绘AI开源版&#xff0c;从闲鱼上买的&#xff0c;搭建教程如下 测试环境&#xff1a;NginxPHP7.4MySQL5.6 图片&#xff1a;

com.alibaba.nacos.api.exception.NacosException: Request nacos server failed

问题描述 安装nacos2.0以上版本&#xff0c;启动报错:com.alibaba.nacos.api.exception.NacosException: Request nacos server failed com.alibaba.nacos.api.exception.NacosException: Request nacos server failed: at com.alibaba.nacos.client.naming.remote.gprc.Nami…

2024022402-数据库恢复技术

数据库恢复技术 什么是事务 事务(Transaction)是用户定义的一个数据库操作序列&#xff0c;这些操作要么全做&#xff0c;要么全不做&#xff0c;是一个不可分割的工作单位 事务和程序是两个概念 在关系数据库中&#xff0c;一个事务可以是一条SQL语句&#xff0c;一组SQL语…

Movelt使用笔记-Movelt Setup Assistant

目录 Setup Assistant配置1 Start 加载urdf模型3 Virtual joints 虚拟关节5 Robot Poses 机器人位姿7 Passive Joints 被动关节8 Controllers 控制器9 Simulation 仿真10 3D Perception 3D感知11 Author Information 作者信息12 Configuration Files 配置文件启动MoveIt!Setup…

潇洒郎:2024 IDEA、Pycharm获取最新激活码获取方式

IDEA获取最新激活码 https://idea.javatiku.cn/ 手机打开&#xff0c;看到验证码&#xff0c;30分钟有效&#xff0c;输入验证码 获取到最新激活码

Vue.js+SpringBoot开发超市商品管理系统

目录 一、摘要1.1 简介1.2 项目录屏 二、研究内容2.1 数据中心模块2.2 超市区域模块2.3 超市货架模块2.4 商品类型模块2.5 商品档案模块 三、系统设计3.1 用例图3.2 时序图3.3 类图3.4 E-R图 四、系统实现4.1 登录4.2 注册4.3 主页4.4 超市区域管理4.5 超市货架管理4.6 商品类型…

IT廉连看——C语言——数组

IT廉连看——C语言——数组 一、一维数组的创建和初始化 1.1 数组的创建 数组是一组相同类型元素的集合。 数组的创建方式&#xff1a; type_t arr_name [const_n]; //type_t 是指数组的元素类型 //const_n 是一个常量表达式&#xff0c;用来指定数组的大小 数组创建…

onlyoffice api开发

编写代码 按照https://api.onlyoffice.com/editors/basic编写代码 <html> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scal…