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


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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python网络爬虫采集联想词示例
2014/02/11 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
搞笑征婚广告词
2014/03/17 职场文书
单位未婚证明范本
2014/11/25 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
小学生安全保证书
2015/05/09 职场文书
施工安全保证书
2015/05/09 职场文书