在微信小程序当中,我们看到有: .js后缀文件,.json后缀文件,.wxss后缀文件,.wxml后缀文件

.js后缀文件就是我们写的普通的js文件

.json后缀文件就是小程序的配置文件,比如:windows的样式,页面的渲染文件顺序,Tabs导航的配置

当然,初始化的实例当中没有给出Tabs配置,其实就跟window的格式一样

.wxss后缀文件就是我们写的css文件

.wxml后缀文件就相当于我们的html文件,里面的view标签就看做是div , text标签就看做是p

所有的页面都在pages文件夹当中,每个页面都有一个单独的文件,这个文件里就包括了.js .wxss .wxml 或者 .json文件

utils文件夹中,你可以放一些common函数,常用的变量等,需要的时候通过import来取得

在project.config.json配置文件当中,我们可以看到项目的设置跟介绍,版本,appid等信息

注意事项:

1.整个小程序实例是MVC开发思想跟模式

2.布局用flexbox

3.在小程序里,像素的单位是rpx,rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

(Tips): 建议设计稿以iphone6尺寸做为视觉标准稿,因为这样的话设备宽度为750px比较容易计算出rpx单位,这样一来,1px=1rpx;至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算了

4.学习一些基本的ES6语法(比如:import(引入)  export(输出)  箭头函数等等)

总结几点:需要学习下弹性盒子布局,ES6基础语法,然后根据上诉所说,就可以开始小程序的编程之旅啦!

如果大家有意见,可以在下方评价,欢迎来访!

下一篇,微信小程序Tabs如何配置(navigator)

微信小程序的目录结构解剖的更多相关文章

  1. 微信小程序基本目录结构学习

    今天我们就以firstdemo为例,介绍一下小程序的基本目录结构.当我们打开一个微信小程序项目后,点击进入“编辑”菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文 ...

  2. 微信小程序之目录结构

    小程序,功能不会太多,页面不会太多. 正常情况下,会包含首页,分类页面,个人中心页面,导航页面,其他页面等等. 我们首先要把页面结构布置好,把架子搭建好. 剩下的就是配置一些内容,小程序的基本信息,接 ...

  3. 3-微信小程序开发(小程序的目录结构说明)

    https://www.cnblogs.com/yangfengwu/p/10050784.html 源码下载链接: 或者 这节先说一下小程序的目录结构 自行根据  https://www.cnblo ...

  4. 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程

    安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...

  5. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

  6. 微信小程序学习二 微信小程序的项目结构

    进来之后可以看到五个文件和两个文件夹,一般新建的小程序项目都是这种格式,但有些可能会不一样,不用担心,因为我们所要关注的文件是不会变的 pages 小程序的页面放置文件夹,每一个页面(page)包含四 ...

  7. 微信小程序API·目录

    网络 媒体 文件 数据缓存 位置 设备 界面 第三方平台 开放接口 数据 更新 多线程 监控 调试接口 日志

  8. 微信小程序学习资料整理

    基础篇 官网: https://mp.weixin.qq.com/cgi-bin/wx 微信小程序: 小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同 ...

  9. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

随机推荐

  1. [BZOJ2753]滑雪与时间胶囊

    第一问直接把可以走的边连起来bfs一遍即可 第二问可以用类似kruskal的方法,只不过排序的依据应该变为第一关键字为终点高度(从大到小),第二关键字为边权(从小到大),只排序可以走的边 因为同样高度 ...

  2. 【离线】【递推】【multiset】 Codeforces Round #401 (Div. 2) C. Alyona and Spreadsheet

    对询问按右端点排序,对每一列递推出包含当前行的单调不下降串最多向前延伸多少. 用multiset维护,取个最小值,看是否小于等于该询问的左端点. #include<cstdio> #inc ...

  3. Visio插入竖直省略号

    不去想省略号,想效果,插入文本框,输入点号,换行,三次就ok.

  4. 【docker】查看docker镜像的版本号TAG,从远程仓库拉取自己想要版本的镜像

    要想查看镜像的版本好TAG,需要在docker hub查看 地址如下:https://hub.docker.com/r/library/ 进入之后,在页面左上角搜索框搜索, 例如搜索redis 搜索完 ...

  5. UVA-10603-Fill(BFS+优先队列)

    There are three jugs with a volume of a, b and c liters. (a, b, and c are positive integers not grea ...

  6. DL380 G6 BIOS刷新方法

    bios下载地址SP44873.exe (5.9 MB) http://h20000.www2.hp.com/bizsupport/TechSupport/SoftwareDescription.js ...

  7. Invalidate、RedrawWindow与UpdateWindow的差别

    一:什么时候才会发生重绘窗体的消息?       当须要更新或又一次绘制窗体的外观时,应用程序就会发送WM_PAINT消息. 对窗体进行又一次绘制. 二:Invalidate() -- RedrawW ...

  8. 关于 iOS 证书,你必须了解的知识

    收录待用,修改转载已取得腾讯云授权 最新腾讯云技术公开课直播,提问腾讯W3C代表,如何从小白成为技术专家?点击了解活动详情. 作者 |陈泽滨 编辑 | 顾乡 从事iOS开发几年,越来越发现,我们的开发 ...

  9. mac重置蓝牙模块

    升级系统后蓝牙鼠标无法连接,蓝牙模块也无法关闭,通过重置 PRAM和SMC解决 PRAM 重置 关机,拔掉所有外设,接上电源. 启动时同时按住 Command, Option, p, r , 听到三次 ...

  10. lodash 集合处理方法 map和filter区别

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...