01——微信小程序官方demo讲解——文件结构

1.环境概览

首先环境配置的部分略过,打开小程序开发工具。选择一个空目录,即可开始一个demo项目。

其中新建成功后的目录如图所示:

2.文件结构描述

如图所示,左边是界面展示,右边是目录结构。

目录大体分为3部分:app部分。pages部分。其他部分。

app主要放置一些全局性的变量以及配置。就相当于浏览器中的windows.node中的global。

pages中放的是一个一个的页面。一个页面由一个文件夹组成,文件夹内由四部分组成,js,wxml,wxss,json。

  其中js主要是该页面的业务逻辑部分。

  其中wxml主要是该页面的页面结构部分。对应web开发中的html。

  其中wxss主要是存放该页面的样式部分。对应web开发中的css部分。

  其中json主要存放页面的配置。可以省略。

原文地址:https://www.cnblogs.com/whiteHome/p/8595267.html

时间: 2024-10-10 12:13:36

01——微信小程序官方demo讲解——文件结构的相关文章

02——微信小程序官方demo讲解——app部分

第一节讲了目录结构,这节主要讲解下目录中app.js部分. 它由三部分组成app.js.app.json与app.wxss 1.JS部分 1.1概述 //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success

03——微信小程序官方demo讲解——page部分

一个page由一个文件夹以及文件夹下四个文件组成. 比如一个页面叫index.则需要在pages目录下新建一个index目录,且包含由index+类型(js\wxml\wxss\json)为名组成的若干文件.文件名格式为硬性要求. 1.JS部分 1.1概述 Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { retu

Mac上微信小程序官方开发工具卡死的问题

Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除"微信web开发者工具" 2.删除一下几个配置和缓存文件: 1.-/Library/Application Support/微信web开发者工具 2.~/Library/Preferences/com.tencent.wechat.devtools.plist 3.~/Library/Caches/微信web开发者工具 3.重新安装"微信web开发者工具"

weapp微信小程序初探demo

https://github.com/donglegend/weapp-demo 参考文档开发工具安装微信weapp API git项目源码微信小程序 demo效果展示效果预览

微信小程序开发交流与推广

一.请加微信群: 请扫描下方的二维码加“微信小程序交流推广群”,由于微信群的限制,超过 100 人就不能扫码加群,大家可以先添加微信号:us9488 并备注“微信小程序”,然后拉你入群. 二.官方文档: 微信小程序介绍 微信小程序设计指南 微信小程序开发文档 微信小程序运营规范 微信小程序开发者社区 三.微信小程序解决方案: 微信小程序会话管理场景 微信小程序文件上传下载应用场景 微信小程序WebSocket长连接应用场景 微信小程序视频应用场景 四.代码: 会话管理场景 文件上传下载应用场景

微信小程序导航:官方工具+精品教程+DEMO集合+最新资讯

10月15日更新: 官方手册在线版及本地版 W3C微信小程序使用手册:http://www.w3cschool.cn/weixinapp/wgt21q8k.html微信小程序官方开发文档chm版下载 :http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=44微信小程序开发帮助手册:http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=45 10月14日更新: 免费视频集合: 微信小

5款微信小程序开发工具使用报告,微信官方开发工具还有待提升

微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊 很多必备的快捷键都没有,比如全选关键字.快速复制一行等等 颜色主题不能选?不喜欢白色风格怎么搞 没有插件 没有插件 没有插件 重要的事情说三遍 无奈笔者走上了尝试各种IDE的旅途,现在说一下笔者对于IDE的需求或者设想: 轻量级:我不喜欢那种类似Eclipse的庞然大物,即使出现类似工具我也不会去使用

微信小程序开发者工具包(官方版)

1月9日,微信小程序上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序.值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换.用户使用过的小程序,将以列表的方式呈现在小程序TAB中. 下面话不多说:微信小程序开发者工具包下载地址 好了!工具在这里了!大家可能会问,这工具怎么用啊!别急!其实微信公众号官方它是有教程的.因为太多!这里我就不多说了. 我把网址放在下面,大家

微信小程序实例源码大全demo下载

怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不同的一个 源码链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1105 微信小程序精品demo:仿网易云音乐:歌单,FM,播放,评论 源码链接:http://www.wxapp-union.com/forum.php?mod=vie