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


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实现鼠标单击与双击事件共存
Mar 08 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
详解js类型判断
May 22 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
JS字符串和数组如何实现相互转化
Jul 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
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jQuery参数列表集合
2011/04/06 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Python错误处理操作示例
2018/07/18 Python
详解Python中的type和object
2018/08/15 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
共产党员承诺书
2014/03/25 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
新郎结婚保证书
2015/02/26 职场文书
推荐信范文大全
2015/03/27 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书