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


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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
再探JavaScript作用域
Sep 24 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
单线程JavaScript实现异步过程详解
May 19 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
laravel框架创建授权策略实例分析
2019/11/22 PHP
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python实现队列的方法
2015/05/26 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
python中get和post有什么区别
2020/06/19 Python
python中如何设置代码自动提示
2020/07/15 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
教师的实习鉴定
2013/12/15 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
表扬稿格式范文
2015/01/16 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
解决Redis启动警告问题
2022/02/24 Redis