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


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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
Vue scoped及deep使用方法解析
Aug 01 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php adodb操作mysql数据库
2009/03/19 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
Angular路由简单学习
2016/12/26 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
webpack3之loader全解析
2017/10/26 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Python数据类型详解(四)字典:dict
2016/05/12 Python
python实现内存监控系统
2021/03/07 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python如何修改文件时间属性
2021/02/05 Python
Weblogic和WebSphere不同特点
2012/05/09 面试题
初三开学计划书
2014/04/27 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
python 如何用terminal输入参数
2021/05/25 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers