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


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 相关文章推荐
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Django中URL的参数传递的实现
2019/08/04 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
幸福来敲门观后感
2015/06/04 职场文书
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏