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

news2024/11/17 10:00:16

在这里插入图片描述

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

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

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，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.coloradmin.cn/o/1619865.html

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

相关文章

wfs 文件存储系统 v1.0.5

wfs 文件存储系统 v1.0.5

前言&#xff1a;wfs 是高性能海量小文件存储系统 &#xff0c;支持Linux&#xff0c;Windows&#xff0c;Macos&#xff0c;FreeBSD等系统&#xff0c; 可以高效地进行文件存储和读取。wfs 支持文件压缩归档&#xff0c;并提供简洁的数据读取方式和文件后台管理和 以及归档文件…
阅读更多...
STM32学习和实践笔记（14）：按键控制实验

STM32学习和实践笔记（14）：按键控制实验

消除抖动有软件和硬件两种方法 软件方法就是在首次检测到低电平时加延时&#xff0c;通常延时5-10ms&#xff0c;让抖动先过去&#xff0c;然后再来检测是否仍为低电平&#xff0c;如果仍然是&#xff0c;说明确实按下。 硬件方法就是加RC滤波电路&#xff0c;硬件方法会增加…
阅读更多...
SystemUI GlobalActions plugin解析

SystemUI GlobalActions plugin解析

com.android.systemui.action.PLUGIN_GLOBAL_ACTIONS 系统的默认实现为GlobalActionsImpl: 是谁发送了showShutdownUi指令&#xff1f; GlobalActionsImpl 是通过inject的方式创建的 GlobalActionsComponent是一个system UI services&#xff0c;配置在config.xml中&#xff…
阅读更多...
架构师系列-Nginx、OpenResty（一）- 基本使用配置

架构师系列-Nginx、OpenResty（一）- 基本使用配置

Nginx 模块 高度模块化的设计是 Nginx 的架构基础&#xff0c;Nginx 服务器被分解为多个模块&#xff0c;每个模块就是一个功能模块&#xff0c;只负责自身的功能&#xff0c;模块之间严格遵循“高内聚&#xff0c;低耦合”的原则。 核心模块 核心模块是 Nginx 服务器正常运行…
阅读更多...
vue2项目升级到vue3经历分享

vue2项目升级到vue3经历分享

依据vue官方文档&#xff0c;vue2在2023年12月31日终止维护。因此决定将原来的岁月云记账升级到vue3&#xff0c;预计工作量有点大&#xff0c;于是想着把过程记录下来。 原系统使用的技术栈 "dependencies": {"axios": "^0.21.1","babel-…
阅读更多...
博士困境：：博士毕业出路何在

博士困境：：博士毕业出路何在

::: block-1 “时问桫椤”是一个致力于为本科生到研究生教育阶段提供帮助的不太正式的公众号。我们旨在在大家感到困惑、痛苦或面临困难时伸出援手。通过总结广大研究生的经验&#xff0c;帮助大家尽早适应研究生生活&#xff0c;尽快了解科研的本质。祝一切顺利&#xff01;—…
阅读更多...
Windows 搭建自己的大模型-通义千问

Windows 搭建自己的大模型-通义千问

1、安装 pytorch https://pytorch.org/get-started/locally/ 点击进入官网&#xff0c;如图选择自己的环境得到pip安装依赖的命令&#xff1a; pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu 2、拉取代码并安…
阅读更多...
欢乐钓鱼大师一键钓鱼，解放双手！

欢乐钓鱼大师一键钓鱼，解放双手！

《钓鱼欢乐大师》是一款让玩家体验钓鱼乐趣的游戏&#xff0c;在游戏中&#xff0c;玩家可以通过技巧和策略钓到各种各样的鱼。为了提高钓鱼效率&#xff0c;让玩家更快地钓到大鱼&#xff0c;下面将介绍如何利用脚本来优化游戏体验。 第一步&#xff1a;准备工作 创建云机&…
阅读更多...
开源贡献代码之​探索一下Cython

开源贡献代码之​探索一下Cython

探索一下Cython 本篇文章将会围绕最近给Apache提的一个feature为背景&#xff0c;展开讲讲Cython遇到的问题&#xff0c;以及尝试自己从0写一个库出来&#xff0c;代码也已经放星球了&#xff0c;感兴趣的同学可以去下载学习。 0.背景 最近在给apache arrow提的一个feature因为…
阅读更多...
在win下,python如何调用.so库

在win下,python如何调用.so库

#撰写c代码 #通过gcc命令编译成.so库 gcc -shared -o ./lib/pointlib.so point.c #python调用.so库 #运行结果
阅读更多...
聊聊 Linux iowait

聊聊 Linux iowait

哈喽大家好&#xff0c;我是咸鱼。 我们在使用 top 命令来查看 Linux 系统整体 CPU 使用情况的时候&#xff0c;往往看的是下面这一列&#xff1a; %Cpu(s): 0.0 us, 0.0 sy, 0.0 ni,100.0 id, 68.0 wa, 0.0 hi, 0.0 si, 0.0 st其中&#xff0c;man 手册解释 wa 表示 …
阅读更多...
什么是大语言模型以及如何构建自己的大型语言模型？

什么是大语言模型以及如何构建自己的大型语言模型？

一、关于大语言模型 LLM 对于无数的应用程序非常有用&#xff0c;如果我们自己从头开始构建一个&#xff0c;那我们可以了解底层的ML技术&#xff0c;并可以根据特定需求定制LLM&#xff0c;但是对资源的需求巨大。大型语言模型是一种 ML 模型&#xff0c;可以执行各种自然语言…
阅读更多...
C语言 三目运算符

C语言 三目运算符

C语言 逻辑分支语句中 还有一种 三目运算符 我们编写代码如下 #include <stdio.h>int main() {const char* a 1 1 ? "表达式1" : "表达式2";printf("%s", a);return 0; }这里 我们根据逻辑 先定义一个a 然后 它的值 等于一个 三目运算…
阅读更多...
CSS动画（css、js动画库：各种动画效果）

CSS动画（css、js动画库：各种动画效果）

第一种方法&#xff1a;文字从上到下显示动画&#xff1b; <div class"text-container"><div class"text">文字从上到下显示</div></div><style scoped> /*确保 keyframes 规则在引用它的任何选择器之前定义&#xff0c;以避…
阅读更多...
Centos之yum安装好玩的命令

Centos之yum安装好玩的命令

1.会动的小火车 我在root下使用的 yum install sl.x86_64sl2.figlet yum install figlet.x86_64figlet 55553.cowsay会说话 yum install cowsay
阅读更多...
MySQL无法打开情况下读取frm文件的表结构

MySQL无法打开情况下读取frm文件的表结构

一、背景&#xff1a; 开发人员通过MySQL客户端工具&#xff0c;可以访问MySQL5.7.6&#xff0c;可以访问具体的DB&#xff0c;可以查看小写表的数据&#xff0c;但是无法查看大写表的数据&#xff0c;报错信息为“table does not exist”。 二、检查与分析&#xff1a; ssh登录…
阅读更多...
深度学习基础：循环神经网络中的长期依赖问题

深度学习基础：循环神经网络中的长期依赖问题

循环神经网络中的长期依赖问题 在深度学习中&#xff0c;循环神经网络&#xff08;RNN&#xff09;是一种经典的模型&#xff0c;用于处理序列数据&#xff0c;如自然语言处理、时间序列预测等任务。然而&#xff0c;传统的RNN存在着一个长期依赖问题&#xff0c;即在处理长序…
阅读更多...
element-ui et -i 编译默认主题报错：ReferenceError: primordials is not defined

element-ui et -i 编译默认主题报错：ReferenceError: primordials is not defined

报错信息如下 fs.js:40 } primordials;^ ReferenceError: primordials is not defined导致这个问题的原因&#xff1a;node和gulp版本冲突&#xff01;&#xff01; 我使用的是node 14版本 解决方法&#xff1a; 看了好几个帖子&#xff0c;都推荐使用node 11.15.0版本&am…
阅读更多...
Docker基本管理和虚拟化

Docker基本管理和虚拟化

一、docker的发展历史 https://www.cnblogs.com/rongba/articles/14782624.htmlhttps://www.cnblogs.com/rongba/articles/14782624.html 二、docker的概述 Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源。 Docker是在Linux容器里运行…
阅读更多...
B站评论无限点赞

B站评论无限点赞

网盘自动获取 链接&#xff1a;https://pan.baidu.com/s/1lpzKPim76qettahxvxtjaQ?pwd0b8x 提取码&#xff1a;0b8x
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023