带你入门微信小程序

认识微信小程序

2016年1月9日,TX启动小程序研发,于2017年1月9日正式发布。不同于微信订阅号或公众号,微信小程序被赋予了应用程序的能力,他是一种无需安装即可使用的应用,它实现了应用“触手可及”的梦想,用户“扫一扫”或者“搜一搜”即可打开应用;体现了“用完就走”的理念,用户不再需要关心是否安装太多应用问题。应用将无处不在,随时随地可用,无需卸载。

微信小程序相关技术

微信小程序自定义了一套语言,称为WXML微信标记语言,它的使用方法类似于HTML语言。另外,微信小程序还定义了自己的样式语言WXSS,它兼容了CSS样式,并做了拓展扩展;使用了JavaScript来进行了业务处理,兼容了大部分JavaScript功能。具备一定的前端知识的小伙伴学习开发小程序将会非常舒服。

微信小程序无可替代的优势

首当其冲,微信小程序解决了兼容性问题,传统APP一般要同时开发iOS和Android两个版本,但是只需要做一版。但是因为原生APP运行快,系统更加流畅,能为用户提供最佳的体验,而小程序流畅性能低,这是其先天缺陷。目前小程序适合低频非刚需以及轻量级功能单一领域。所以就目前而言,微信小程序是不可能完全替代APP的地位。

开发环境

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364

IDE结构

框架全局文件

1、App.js小程序逻辑

App.js文件是必填的,其用于定义全局数据和函数的使用,它可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数,如onLaunch(监听小程序初始化)、onShow(监听小程序显示)、onHide(监听小程序隐藏)等,在不同阶段、不同场景可以使用不同的生命周期函数。此外,App.js中还可以定义一些全局的函数和数据。其他页面引用App.js文件后就可以直接使用全局函数和数据。

2、App.json小程序公共设置

App.json文件可以对5个功能进行设置:配置页面路径、配置窗口表现、配置标签导航、配置网络超时、配置debug模式

3、App.wxss小程序公共样式表

App.wxss文件对CSS样式进行扩展,和CSS的使用方式一样,类选择器和行内样式的写法兼容大部分CSS样式,有一些CSS样式在这里起不了作用,同时它还拓展了CSS,形成了自己风格的样式文件,是对所有页面定义的一个全局样式。只要页面有全局样式中的class,就可以渲染全局样式里的效果;但如果页面又重新定义了这个class样式,则会把全局样式覆盖掉,而使用自己的样式。

除了App.wxss提供的默认全局样式,用户自己也可以定义一些全局样式,这样方便每个页面的使用,又不用挨每个页面上都写一次,达到一次定义,其他页面直接引用的复用效果。

工具类文件

在微信小程序框架目录里有一个“utils”文件夹,它用来存放工具栏的js函数,如可以放置一些日期格式化的函数、时间格式化的函数等一些常用的函数。定义完这些函数后,要通过module.exports将定义的函数名称注册进来,在其他页面才可以使用。

框架页面文件

文件类型 必填 作用
js 页面逻辑
wxml 页面结构
wxss 页面样式表
json 页面配置

微信小程序的框架页面文件都是放置在"pages"文件夹下面的

每个页面都有一个独立的文件夹,就像日志页面的"logs"文件夹,它的下面放置4个文件:logs.js可进行业务路径处理;logs.json是页面的配置,可以覆盖全局的App.json配置;logs.wxml是页面结构,负责渲染页面;logs.wxss是针对logs.wxml页面的样式文件。

时间: 2025-01-03 22:25:18

带你入门微信小程序的相关文章

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

小程序简介 小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作:用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散. 本文带大家快速入门小程开发,了解从环境搭建到开发出一个简单hello world程序,从而上手小程序开发,让你快速成功小程序开发人员.之后,想开发什么样的小程序,就可以自己研究和努力了. 下面,是循序渐经的步骤: ?1.注册小程序 在开发之前,当然需要先注册一个小程序账号. 进入“微信公众平台”进行注

如何入门微信小程序开发

最近微信开发小程序挺火的,自己选择了腾讯云官方推出的相册. 先下载: 破解版IDE下载地址,以及使用说明: http://download.csdn.net/detail/richard_jason/9660819 http://download.csdn.net/detail/richard_jason/9660821 这里由于csdn有上传大小限制,所以只能做两次上传了.要放在一起看哦. 安装步骤 一个步骤都不能错哦 1.安装0.7 - 扫码登陆 - 关闭0.7 2.安装0.9 --不要启动

无需内测账号,带你体验微信小程序完整开发

文章来源:www.zretc.com/technologyDetail/200.html 前一阵子的微信小程序火爆了网络与朋友圈,迅速成为讨论焦点,大家可能觉得只有收到内测邀请才能体验小程序的开发流程,其实不然,每个人都可以体验,下面就请跟着小卓一起去了解下吧. 一.下载微信Web开发工具 首先,微信给我们提供了它自己的小程序集成开发工具,只需要到这个页面下载即可:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t

微信小程序内测申请

想申请微信小程序的内测?别做梦了! 小程序内测是邀请制的,目前就发放了200个内测邀请.正因为稀缺,江湖传言内测资格已经炒到300万(一套房)一个了 但是!!!!你可以先熟悉一下相关资料和文档,下载一个开发工具在自己电脑上玩一下,虽然部分功能受到了限制,但是还是挺有意思的! 小程序开发过程中遇到的各种坑 摘要: 本文收集微信小程序.应用号开发过程中的各种坑,以及疑难问题.不定期整理解决方案. 如果你在开发过程中遇到了问题,请将你的问题在评论中回复,我会不定期整理. 本文收集微信小程序.应用号开发

从零开始:微信小程序新手入门宝典

为了方便大家了解并入门微信小程序,特将可能会需要的知识,列在这里,让大家方便的从零开始学习 一:微信小程序的特点 张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即开打开应用,也出现了用完即走的理念,用户不用关心安装太多应用的问题,应用随处可用,但又无须安装卸载.我当时是这样来定义什么是小程序的. 1:无需下载:我们直接使用它,所以无须安装是小程序最基础的一个特性: 2:触手可及:当我们拿着智能手机接触周边的时

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

微信小程序开发教程目录

本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 微信小程序开发之picker 微信小程序开发之图片预览 微信小程序开发之模板 微信小程序开发之模板消息