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


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 相关文章推荐
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
利用python分析access日志的方法
Oct 26 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vue.js 使用原生js实现轮播图
Apr 26 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创建基本身份认证站点的方法详解
2013/06/08 PHP
php使用google地图应用实例
2014/12/31 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
python并发编程之线程实例解析
2017/12/27 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
最新党员的自我评价分享
2013/11/04 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏