微信开发者工具&WXML+WXSS学习笔记

最新推荐文章于 2024-07-24 15:47:58 发布

WangYC_99

最新推荐文章于 2024-07-24 15:47:58 发布

阅读量4.6k

点赞数 19

分类专栏：微信小程序网页开发文章标签： html css javascript

本文链接：https://blog.csdn.net/FOX_YC_Wang/article/details/107704158

版权

本文是微信开发者工具及WXML+WXSS的学习笔记，介绍了小程序的下载使用、文件结构、页面操作、WXML和CSS3的基本概念、组件应用以及JSON注意事项。内容包括页面的创建、删除，WXML标签、CSS选择器，以及view和text组件的使用等。

摘要由CSDN通过智能技术生成

微信开发者工具&WXML+WXSS学习笔记

by wyc

小程序下载以及使用

浏览器搜索微信小程序api即可找到官网

在设置/外观设置中可以调整开发者工具的颜色以及主题，推荐深色，搭配浅色的语法高亮

文件介绍

在这里插入图片描述

pages、app.js都是必不可少的

utils可以删掉，里面主要是放一些公用文件

名称为app的文件是全局管用的，对于所有的页面都会有影响的，但是在具体的页面中的编写时可以将app中的条例覆盖掉的，也就是pages里面的文件代码的权限是最高的。

//复习感想：wxml以及wxss是最主要的编辑页，js以及json是逻辑页。

utils

公用代码信息（略）修改字符串等的信息以及时间戳的修改

app.js

逻辑层，交互动效，就是说所有的页面的转化啊互动啊这些应该是放在js文件里面的。

app.json

配置项，e.g.标题名，页面颜色

app.wxss

样式层类比CSS 样式文件，颜色宽高

project.config.json

项目的配置文件，在小工具右上角直接可以进行可视化的操作，所以一般不手动改这个文件里面的代码

sitemap.json

地图（类似于网站里的地图）

wxml

页面结构的编辑。

页面的操作

view标签对标的是div标签

预览页面的切换

在app.json里面去编辑预览的页面的顺序，注意最后不要加文件类型后缀。

{
   
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/news/news"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}