微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,前后端开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,linux,shell脚本等实操经验,网站搭建,面试宝典等分享。

所属的专栏:微信小程序开发零基础教学,难点与应用实战总结
景天的主页:景天科技苑

文章目录

  • 1.创建微信小程序项目
    • 1.1 创建项目流程(开发者)
    • 1.2 创建项目
    • 1.3 本地开发支持http
  • 2.项目目录结构
    • 2.1 项目目录结构
      • 2.1.1 目录介绍
      • 2.1.2 配置文件
        • 2.1.2.1 项目配置app.json
        • 2.1.2.2 页面配置 xx.json
        • 2.1.2.3 整个项目配置文件
        • 2.1.2.4 搜索相关配置(seo)
  • 3.webview渲染
    • 3.1 webview和skyline渲染模式
  • 4.新建页面
  • 5.启动页面调整
    • 修改小程序一启动,显示的页面
      • 方式一:在app.json中的pages中修改顺序,第一个先显示
      • 方式二:通过entryPagePath配置:entryPagePath:小程序默认启动首页
      • 方式三:临时用--》写了个页面,临时看一下
  • 6.调试小程序
    • 6.1 调试小程序基础库
    • 6.2 调试窗口
    • 6.3 真机调试
  • 7.纯净项目
  • 8.快速上手
    • 8.1 小程序常用组件
    • 8.2 tabbar配置

1.创建微信小程序项目

1.1 创建项目流程(开发者)

1.获取 小程序id

  • 小程序后台–》开发–》开发管理–》开发设置–》开发者ID
  • AppID(小程序ID) wxxxxxxxxxxxf

在这里插入图片描述

2.下载微信开发者工具–》这个工具必须联网才能使用
在这里插入图片描述

  • 下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.一路下一步安装–》桌面有个快捷方式

  • 微信开发者工具就等同于 pycharm
    在这里插入图片描述

选择安装目录
在这里插入图片描述

安装完成,会生成桌面图标
在这里插入图片描述

1.2 创建项目

1.双击 微信开发者工具

2.微信扫码–》登录
在这里插入图片描述

扫码登录成功
在这里插入图片描述

3.创建项目

  • 点加号创建项目
  • 填写名字
  • 路径
  • APPID
  • 不使用云开发【使用腾讯云的云函数,服务器等等,需要花钱】
  • 不使用模版
    • 可以选择js基础版–》别的别选了
      - JS:咱们不会
      - 其他模版功能比较复杂对新手不友好
      在这里插入图片描述

点确定
在这里插入图片描述

在这里插入图片描述

4.基础设置

  • 设置–》编辑器设置–》改变字体大小
  • 视图–》外观–》移动模拟器位置
  • 可以勾选掉不显示:模拟器,调试器等
    在这里插入图片描述

1.3 本地开发支持http

本地开发–》使用django写后端

  • django运行在 0.0.0.0:8000 地址

  • 微信小程序才能通过ip地址访问到我们的django项目的接口

  • 微信小程序默认不支持http–》django运行在http上–》修改一下–》微信小程序配置

    • 让小程序支持 http请求
    • 右上角–》详情–》本地设置–》不校验合法域名
      在这里插入图片描述

在这里插入图片描述

2.项目目录结构

2.1 项目目录结构

2.1.1 目录介绍

1.项目主配置文件,在项目根路径下,控制整个项目的

  • app.js # 小程序入口文件,小程序启动,会执行这个js
  • app.json # 小程序的全局配置:顶部的颜色,标题。。。
  • app.wxss # 小程序全局样式:所有样式,全局生效
    app.js 和app.json 必须有,没有不行
    在这里插入图片描述

2.页面文件

  • pages文件夹下,有一个个的文件夹(index,login,register)–>每个文件夹下有4个文件
  • xx.js # 页面逻辑,js代码控制
  • xx.wxml # 页面结构,布局,html—》wxml就等同于html,但标签有些区别
  • xx.json # 页面配置,当前页面顶部颜色,标题。。
  • xx.wxss # 页面的样式,如果全局样式也有,以当前页面为准
    xx.js和xx.wxml 必须得有,不能没有

在这里插入图片描述

3.其他的不重要

├── components 【页面中使用的组件】
├── pages 【页面文件目录】
│ ├── index 【页面】
│ │ ├── index.js 【页面JS】
│ │ ├── index.json 【页面配置】
│ │ ├── index.wxml 【页面HTML】
│ │ └── index.wxss 【页面CSS】
│ └── logs 【页面】
│ ├── logs.js …
│ ├── logs.json …
│ ├── logs.wxml …
│ └── logs.wxss …
├── utils 【自定义工具】
│ └── utils.js 【功能的定义】
├── app.js 【全局JS】
├── app.json 【全局配置】
├── app.wxss 【全局CSS】
├── project.config.json 【开发者工具默认配置】
├── project.private.config.json 【开发者工具用户配置,在这里修改,优先用这个,可以删除】
├── .eslintrc.js 【ESlint语法检查配置】
├── sitemap.json 【微信收录页面,用于搜索,上线后,搜索关键字就可以搜到我们】

2.1.2 配置文件

2.1.2.1 项目配置app.json

1.小程序全局配置文件,用于配置小程序的一些全局属性和页面路由,默认标题,顶部颜色,是否有下拉刷新。。

2.配置参考地址
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
在这里插入图片描述

3.部分参数演示
entryPagePath:小程序默认启动首页
pages: 小程序总共有多少个页面
window:全局的默认窗口表现,顶部颜色,是否有下拉,它控制很多东西,这个经常用

2.1.2.2 页面配置 xx.json

1.小程序页面配置文件,也称局部配置文件,用于配置当前页面的窗口样式、页面标题等
2.app.json 中的部分配置,也支持对单个页面进行配置,可以在页面对应的 xx.json 文件来对本页面的表现进行配置。

3.页面中配置项在当前页面会覆盖 app.json 中相同的配置项(样式相关的配置项属于 app.json 中的 window 属性,但这里不需要额外指定 window 字段),具体的取值和含义可参考全局配置文档中说明

4.参考文档:
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
在这里插入图片描述

5.常用的
navigationBarBackgroundColor # 导航栏背景颜色,如 #000000
navigationBarTextStyle # 导航栏标题、状态栏颜色,仅支持 black / white
navigationBarTitleText # 导航栏标题文字内容

2.1.2.3 整个项目配置文件

1.project.config.json project.private.config.json
project.config.json 和右上角详情里面的设置是联动的
在这里插入图片描述
在这里插入图片描述

2.小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置
3.project.private.config.json项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段
4.参照文档
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
在这里插入图片描述

2.1.2.4 搜索相关配置(seo)

1.作用
微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。
爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中

2.参考文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
在这里插入图片描述

3.配置–》以后用户搜索小程序,任意页面有关键字,都会被搜索到
{
“desc”: “关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html”,
“rules”: [{
“action”: “allow”,
“page”: “*”
}]
}

3.webview渲染

当我们打开console控制台,可以看到渲染支持提示
在这里插入图片描述

3.1 webview和skyline渲染模式

webview:老一点,稳定,支持老版本和新版本
skyline: 新一点,不太稳定,不支持老版本

我们调成webview模式,更稳定一些

项目配置—》app.json–>删除3个配置

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

把这几个配置删了
在这里插入图片描述

删除完的app.json
在这里插入图片描述

ctrl+s 保存,发现console控制台就不会有那个版本告警提示了
在这里插入图片描述

4.新建页面

1 app.json中只有一个页面–》小程序–》只有一个页面
- 后期增加页面

增加页面方式一
1 在pages上右键–》新建文件夹
2 在新建的文件夹上–》右键–》新建Page
3 多出4个文件
xx.js
xx.wxml
xx.json
xx.wxss

4 在app.json中的page中多一行
“pages”: [
“pages/index/index”,
“pages/login/login”
]

在这里插入图片描述
在这里插入图片描述

增加页面方式二
1 在 app.json中,pages中,新增一行
2 会自动创建文件夹和页面

在这里插入图片描述

5.启动页面调整

当我们打开小程序,默认程序启动顺序基于app.json中来显示的
在这里插入图片描述
在这里插入图片描述

修改小程序一启动,显示的页面

方式一:在app.json中的pages中修改顺序,第一个先显示

“pages”: [
“pages/index/index”,
“pages/login/login”,
“pages/register/register”
],

方式二:通过entryPagePath配置:entryPagePath:小程序默认启动首页

在app.json中配置

“entryPagePath”: “pages/index/index”, # 居多
在这里插入图片描述

我们修改下注册页面wxml
在这里插入图片描述

在app.json中设置启动页面
在这里插入图片描述

可以看到启动页面已被修改
在这里插入图片描述

方式三:临时用–》写了个页面,临时看一下

  • 添加编译模式

比如临时我们想把启动页面设置为login
在当前页面选择添加编译模式
在这里插入图片描述

将启动页面改为login
在这里插入图片描述

选完,点击确定,启动页面改为login
在这里插入图片描述

6.调试小程序

6.1 调试小程序基础库

微信小程序的基础库,一直不停地在做版本升级

  • 转发功能
  • 发送朋友圈功能
  • 。。。

不同功能是在不同版本中加入的

  • 假设我们基于老版本的基础库开发的–》有的新功能可能没有
  • 在开发的时候,做功能如果发现写了没效果
  • 确认一下这个基础库是否支持这个功能

参考地址:
https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html
在这里插入图片描述

基础库就在右上角 详情 本地设置 调试基础库 里面选
最好选择占有率比较高的版本
在这里插入图片描述

看下有些功能的基础库支持
在这里插入图片描述

6.2 调试窗口

当我们打开调试器,会出现调试窗口
在这里插入图片描述

调试窗口各个功能如图所示
在这里插入图片描述

6.3 真机调试

在这里插入图片描述

一点击真机调试,会弹出二维码
微信扫描,就可以在微信上看到了
在这里插入图片描述

扫码后手机查看小程序
在这里插入图片描述

开发工具也会弹出真机调试窗口,显示手机信息
在这里插入图片描述

7.纯净项目

把项目不要的东西都删除–》只留核心–》开发

app.json
{
“pages”: [
“pages/index/index” # 就一个页面

],
“window”: {
“navigationBarTitleText”: “功能演示”, # 标题
“navigationBarBackgroundColor”: “#0000FF”, #颜色
“enablePullDownRefresh”: false, # 是否带下拉刷新
“backgroundColor”: “#00FFFF”, # 下拉刷新颜色
“backgroundTextStyle”: “dark” # light ,下拉刷新的点点什么颜色
},
“style”: “v2”,
}

app.wxss 空的

app.js
App({})

pages/index
index.js
Page({})
index.json
{
“usingComponents”: {

      }}

index.wxml

<view class="container">景天科技</view>

index.wxss
-空的
在这里插入图片描述

打开下拉刷新
在这里插入图片描述

8.快速上手

8.1 小程序常用组件

1.做过html的都知道
a标签
div标签
span标签
img标签
。。。

2.小程序没有这些,自己封装的叫组件
-https://developers.weixin.qq.com/miniprogram/dev/component/

可以看下小程序所有可用组件
在这里插入图片描述

3.text —》span 不换行,放文字

<text>我是首页</text>
<text>我是首页333</text>
<text>我是首页444</text>

在这里插入图片描述

4.view–》div 换行

<view>我是view</view>
<view>我是view222</view>
<view><text>撒东方闪电</text></view>

在这里插入图片描述

5.image 标签—》img

<image src="/images/b.jpg" style="width: 750rpx;height: 400rpx;"></image>

在这里插入图片描述

6.icon 图标
在这里插入图片描述

<icon type="success_no_circle"  color="red"/>
<icon type="cancel" color="#ddd"/>

在这里插入图片描述

8.2 tabbar配置

在底部或在顶部的 tab页
-几乎所有小程序都会有这个

如何设置
1 在app.json 配置
“tabBar”: {
“selectedColor”: “#b4282d”,
“position”: “bottom”,
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “首页”,
“iconPath”: “images/home.png”,
“selectedIconPath”: “images/home_select.png”
},
{
“pagePath”: “pages/my/my”,
“text”: “我的”,
“iconPath”: “images/my.png”,
“selectedIconPath”: “images/my_select.png”
}
]
},

2 创建页面 my

3 把图片复制到images目录下

查看小程序界面
在这里插入图片描述

点击 我的
在这里插入图片描述

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

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

相关文章

redis单线程模型

工作原理 在Redis中&#xff0c;当两个客户端同时发送相同的请求时&#xff0c;Redis采用单线程模型来处理所有的客户端请求&#xff0c;会依次处理这些请求&#xff0c;每个请求都会按照先后顺序被执行&#xff0c;不会同时处理多个请求。使得Redis能够避免多线程并发访问数据…

大语言模型应用指南:以ChatGPT为起点,从入门到精通的AI实践教程

目录 前言ChatGPT问世和发展展望未来大语言模型应用指南 特点大语言模型应用指南 主要内容 前言 在20世纪末和21世纪初&#xff0c;人类经历了两次信息革命的浪潮。 第一次是互联网时代的兴起&#xff0c;将世界各地连接在一起&#xff0c;改变了人们获取信息和交流的方式。 …

Nobe.js的安装与配置

1. **下载**&#xff1a;访问Node.js官网&#xff0c;选择适合自己操作系统的安装包进行下载。 2. **安装**&#xff1a;双击下载好的安装包并按照提示进行安装。在安装过程中&#xff0c;可以选择自定义安装路径&#xff0c;并确保勾选接受许可协议。 3. **环境变量配置**&…

函数式接口及Stream流式计算

一、什么是函数式接口 只有一个方法的接口&#xff0c;例如 FunctionalInterface public interface Runnable { public abstract void run(); }二、Function函数式接口&#xff1a;有一个输入参数&#xff0c;有一个输出 三、断定型接口&#xff1a;有一个输入参数&#xf…

YOLO如何入门?

入门 YOLO 目标检测算法&#xff0c;你可以遵循以下步骤&#xff1a; 1. 理解目标检测的基本概念&#xff1a;了解目标检测在计算机视觉中的作用&#xff0c;以及它如何帮助识别和定位图像中的对象。 2. 学习基础的机器学习和深度学习知识&#xff1a;熟悉基础的机器学习算法…

使用rsync建立MySQL从节点

使用场景&#xff1a;MySQL主节点存储较大&#xff0c;使用xtrabackup会遇到异常的情况 前置条件&#xff1a;node-01 与 node-02 做过ssh互信&#xff0c;rsync客户端均已安装&#xff0c;主节点开启binlog node-01 原主节点&#xff0c;数据存放目录为 /var/lib/mysql node-0…

Bin-什么是wafer sorting及相关方案

在半导体行业中,"wafer分bin"(或称为wafer sorting)是指根据晶圆上的芯片在测试过程中的性能参数,将它们分类到不同的性能等级或"bin"中。这个过程对于确保最终产品的性能和质量至关重要。以下是wafer分bin业务的介绍和相关方案: 01、业务介绍: 1. …

语音驱动AI人脸动画

目录 audio2face FaceFormer 语音驱动 3D人脸动画 MODA 基于人脸关键点的语音驱动单张图数字人生成&#xff08;ICCV2023&#xff09; sadTalker 从音频中生成3DMM的头部姿势和表情 Media2Face 还没开源 audio2face https://github.com/FACEGOOD/FACEGOOD-Audio2Face/tr…

《ElementPlus 与 ElementUI 差异集合》el-select 显示下拉列表在 Cesium 场景中无法监听关闭

前言 仅在 Element UI 时有此问题&#xff0c;Element Plus 由于内部结构差异较大&#xff0c;不存在此问题。详见《el-select 差异点&#xff0c;如&#xff1a;高、宽、body插入等》&#xff1b; 问题 点击空白处&#xff0c;下拉列表可监听并关闭&#xff1b;但在 Cesium…

【js】解决自动生成颜色时相邻颜色视觉相似问题的技术方案

解决自动生成颜色时相邻颜色视觉相似问题的技术方案 在进行大规模颜色生成时&#xff0c;特别是在数据可视化、用户界面设计等应用领域&#xff0c;一个常见的挑战是确保相邻颜色在视觉上具有足够的区分度。本文介绍的方法通过结合黄金分割比与饱和度、亮度的周期性变化&#…

数据分析_时间维度对比及变化可视化分析(Pandas和Matplotlib)

数据分析_时间维度对比及变化可视化分析(Pandas和Matplotlib) 分析维度包括: 各年度合计销量 各年度合计销售额 各年度平均每公斤销售额 各月度销量对比 各月度销售额变化 构建测试数据 这里你可以了解到: 如何生成时间相关的数据。 如何从列表&#xff08;可迭代对象…

Linux多进程(二)进程通信方式一 管道

管道的是进程间通信&#xff08;IPC - InterProcess Communication&#xff09;的一种方式&#xff0c;管道的本质其实就是内核中的一块内存(或者叫内核缓冲区)&#xff0c;这块缓冲区中的数据存储在一个环形队列中&#xff0c;因为管道在内核里边&#xff0c;因此我们不能直接…

Vue 双向绑定、diff和nextTick原理

前言 什么是虚拟dom virtual DOM 虚拟DOM&#xff0c;用普通js对象来描述DOM结构&#xff0c;因为不是真实DOM&#xff0c;所以称之为虚拟DOM。 虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的&#xff0c;在react&#xff0c;vue等技术出现之前&#xff0c;我们要改变页面…

LabVIEW专栏八、类

该章目的是可以开发仪器类。 一、类的概述 一般来说类有三大特性&#xff0c;封装&#xff0c;继承和多态。 在实际项目中&#xff0c;最主要是继承和多态&#xff0c;要搞清楚这两者的概念和在LabVIEW中是怎样应用的。在LabVIEW中&#xff0c;面向对象编程用到的就是LabVIE…

Mac 上可以使用 ping 端口

在 Mac 上可以使用 ping 命令来检查与另一台计算机或网络设备的连通性。要 ping 一个端口&#xff0c;你需要使用另一个命令 nc&#xff08;也称为 netcat&#xff09;。 例如&#xff0c;假设你想要 ping 端口 8080&#xff08;通常用于 HTTP 代理服务器&#xff09;&#xf…

SAM在低阶自适应航空土地覆盖分类中的应用2024.01

GEOSCIENCE AND REMOTE SENSING LETTERS 2024.01 提出了一种新的语义分割模型&#xff0c;该模型结合了SAM的图像编码器和低秩自适应方法(LoRA)&#xff0c;用于航空图像的特征提取和微调。我们还使用了一个辅助CNN编码器来促进下游适应&#xff0c;并补充ViT编码器在密集视觉…

机器学习模型效果不好及其解决办法

当训练出来的机器学习模型效果不佳时&#xff0c;可能涉及多个方面的原因。为了改善模型的效果&#xff0c;需要系统地检查和分析问题的根源&#xff0c;并采取相应的措施进行优化。 一、数据问题 数据质量 检查数据是否干净、完整&#xff0c;是否存在噪声、异常值或缺失值。…

【MySQL】A01、性能优化-语句分析

1、数据库优化方向 A、SQL及索引优化 根据需求写出良好的SQL&#xff0c;并创建有效的索引&#xff0c;实现某一种需求可以多种写法&#xff0c;这时候我们就要选择一种效率最高的写法。这个时候就要了解sql优化 B、数据库表结构优化 根据数据库的范式&#xff0c;设计表结构&…

MAC 安装miniconda

Conda Conda是一个开源跨平台语言无关的包管理与环境管理系统。由“连续统分析”基于BSD许可证发布。 Conda允许用户方便地安装不同版本的二进制软件包与该计算平台需要的所有库。还允许用户在不同版本的包之间切换、从一个软件仓库下载包并安装。 Conda是用Python语言开发&am…

从C向C++14——STL初识及函数对象

一.STL初识 1.STL的诞生 长久以来&#xff0c;软件界一直希望建立一种可重复利用的东西C的面向对象和泛型编程思想&#xff0c;目的就是复用性的提升多情况下&#xff0c;数据结构和算法都未能有一套标准,导致被迫从事大量重复工作为了建立数据结构和算法的一套标准,诞生了ST…