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


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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
Javascript闭包实例详解
Nov 29 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
Vue头像处理方案小结
Jul 26 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 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
终于听上了直流胆调频
2021/03/02 无线电
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
php报错502badgateway解决方法
2019/10/11 PHP
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
javascript控制台详解
2015/06/25 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
预备党员表决心的话
2015/09/22 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python