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


Posted in Javascript onJune 04, 2020

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

首先,放上微信公众品台的网址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

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

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

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

Javascript 相关文章推荐
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
深入探讨前端框架react
Dec 09 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 #Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 #Javascript
JavaScript监听键盘事件代码实现
Jun 03 #Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 #Javascript
You might like
关于js与php互相传值的介绍
2013/06/25 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
javascript常用的方法整理
2015/08/20 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
js判断密码强度的方法
2020/03/18 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
django上传图片并生成缩略图方法示例
2017/12/11 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Python socket服务常用操作代码实例
2020/06/22 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
医科大学生的自我评价
2013/12/04 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
法学个人求职信范文
2014/01/27 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
法人代表资格证明书
2015/06/18 职场文书
人生感悟经典句子
2019/08/20 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL