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


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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
javascript history对象详解
Feb 09 Javascript
js实现五星评价功能
Mar 08 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
JavaScript正则表达式和级联效果
Sep 14 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
解读python如何实现决策树算法
2018/10/11 Python
微信小程序python用户认证的实现
2019/07/29 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
用Python实现职工信息管理系统
2020/12/30 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
中专自荐信
2013/10/13 职场文书
夜不归宿检讨书
2014/02/25 职场文书
社区维稳工作方案
2014/06/06 职场文书
职业规划实施方案
2014/06/10 职场文书
金融与证券专业求职信
2014/06/22 职场文书
前台接待岗位职责范本
2015/04/03 职场文书