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


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 相关文章推荐
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
js中new一个对象的过程
Feb 20 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 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
YII使用url组件美化管理的方法
2015/12/28 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
Vue.use源码分析
2017/04/22 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
基于vue实现分页效果
2017/11/06 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python字典操作简明总结
2015/04/13 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
实习教师自我鉴定
2013/09/27 职场文书
餐饮加盟计划书
2014/01/10 职场文书
出生医学证明样本
2014/01/17 职场文书
会计顶岗实习心得
2014/01/25 职场文书
爱心捐助倡议书
2014/05/19 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
SQL Server使用导出向导功能
2022/04/08 SQL Server