当前位置: 首页 > 编程笔记 >

微信小程序学习总结(一)项目创建与目录结构分析

拓拔嘉运
2023-03-14
本文向大家介绍微信小程序学习总结(一)项目创建与目录结构分析,包括了微信小程序学习总结(一)项目创建与目录结构分析的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了微信小程序项目创建与目录结构。分享给大家供大家参考,具体如下:

首先,放上微信公众品台的网址https://mp.weixin.qq.com/,下面内容完全可以跟着做。https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
下载开发工具。

创建项目

如图所示

选点此校验就行啦,右边有个详情也点开瞅两眼。

上传测试和腾讯这块点不了是为啥呢,因为你创建项目的时候没有填写AppID,下一题。

具体的东西下载下来瞅瞅点点就行。下面介绍结构。

目录结构


1.wxml相当于html,wxss相当于css

2.在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成改页面所需要的文件


同样里面也会生成四个文件,且与文件名同名的文件。


3.ctrl+s相当于点击编译

4.外面的四个文件相当于全局文件,那么是听谁的呢,当然是就近原则了,离谁近受谁影响

例子:在index.wxml写上这么一句<text>hello world </text>,在index.wxss中写上text{ color:red; },在全局wxss中写text{ color:blue; },结果颜色为红色啦。

5.json文件是来干嘛的呢。我们来看官方的解释。app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

第一部分pages


接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

第二部分window

用于设置小程序的状态栏、导航条、标题、窗口背景色。


很给力!

希望本文所述对大家微信小程序设计有所帮助。

 类似资料:
  • 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必需 作用 app.js 是 小程序逻辑 app.json 是 小程序公共配置 app.ftss 否 小程序公共样式表 一个小程序页面由四个文件组成,分别是: 文件类型 必需 作用 js 是 页面逻辑 fxml 是 页面结构 json 否 页面配置 ftss

  • 前言 这一篇,我们将接着上篇来完成创建项目文件、目录结构。 回顾 先回顾一下现在项目有哪些东西了: . ├── app │   ├── app.vue │   ├── common │   │   ├── img │   │   ├── js │   │   └── scss │   ├── index.html │   ├── index.js │   ├── router

  • 本文向大家介绍微信小程序学习总结(四)事件与冒泡实例分析,包括了微信小程序学习总结(四)事件与冒泡实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了微信小程序学习总结(四)事件与冒泡。分享给大家供大家参考,具体如下: 先来熟悉一个swiper组件,可以实现我们常见的轮播图效果。 indicator-dots=“true” 这个是显示面板的指示点 indicator-color="rg

  • 程序目录结构 SpeedPHP框架的目录结构比较简单,秉承了SpeedPHP快速学习的理念。 新版的sp框架,由于加入了mudules开发模式,所以在目录结构方面,趋于更精炼,更固定化。 3.1版及之前的sp框架,目录结构是可以通过配置进行修改。 但是新版的情况不一样了。 之所以我们要用固定的目录结构,理由如下: 加入mudules开发模式,使得多个应用可以集成到一个程序里面,也就是传统的模块开发

  • 本文向大家介绍微信小程序学习总结(二)样式、属性、模板操作分析,包括了微信小程序学习总结(二)样式、属性、模板操作分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了微信小程序样式、属性、模板操作。分享给大家供大家参考,具体如下: 小程序尺寸单位 rpx是小程序常见的尺寸单位,那么他和px有啥不同一样呢。rpx可以根据屏幕宽度进行自适应。如在 iPhone6 上,屏幕宽度为375px,共有

  • 文件目录结构