微信小程序,前端大梦想(一)

小程序框架MINA简介

微信公众平台“小程序”具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

去年9月22日,微信公众平台向外发出200个“小程序”内测邀请函。该“小程序”即去年年初腾讯曾对外介绍的微信“应用号”。去年11月4日,微信小程序开放公测,开放注册范围包括企业、政府、媒体、开发者以及其他组织。

如果这是一轮新的潮流,我们实在不应错过这个机会。那么我们都应该准备些什么呢?微信小程序,不是学习JavaScript也不是学习CSS,而是学习小程序的“MINA”框架。这个框架为小程序的运行提供了丰富的组件和API。当然已经掌握JS和CSS的前端开发人员能够更快的上手。

MINA框架(MINA IS NOT APP):

MINA的目标是通过尽可能简单,高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

运行MINA的项目必须要有微信web开发者工具和微信小程序的AppID,因为现在还处于内测阶段的原因,可以先体验下,详情请参考微信小程序开发资料收集。

MINA框架中有四种类型的文件:

.js文件 基于JavaScript的逻辑层框架 .wxml 视图层文件,是MINA设计的一套标签语言 .wxss 样式文件,用于描述WXML的组件样式 .json 文件,配置文件,用于单个页面的配置和整个项目的配置。

目录结构

为了减少配置项,小程序中一个页面中的四个文件必须要有相同的路径和文件名,使用微信web开发者工具新建一个项目,可以看到他的目录结构是这样的:

其中app.js是程序的入口,app.json是项目的配置文件,app.wxss是全局配置的样式文件,logs和index文件夹是是单个页面的文件,utils用来存放常用的工具类文件夹。

这里主要说一下app.js:

app.js使用App()函数注册一个小程序,可以指定小程序的生命周期

小程序的App()生命周期中三个事件可以监听:onLaunch,onShow,onHide。

onLaunch:小程序加载完成之后调用,全局只触发一次。

onShow: 小程序启动,或者从后台到前台会触发一次。

onHide:小程序从前台到后台会触发一次。

此次介绍就到这里,急不可耐的童鞋们玩起来吧!

时间: 2024-08-09 21:56:06

微信小程序,前端大梦想(一)的相关文章

微信小程序 -- 前端技术API手册

小时候随手拿着英语小本子,在厕所或者路上随时翻看的场景大家还记得吗? 现在它有回来了,本次工程主要收录前端各项技术API,整合在微信小程序中,在首页选择要学习的技术就可以进到相关页面. 小程序长这样:               目前的进展是 jQuery API 收录到一半,预计下周 小程序 会先上线,其他内容后续进行补充. 大家有兴趣或者想贡献自己力量的可以联系我,在公众号底部菜单中有联系方式. 如果有想学习微信小程序开发的也可以联系我. 广播: 关注微信公众号 "jQuery每日经典&qu

微信小程序用户身份-微信小程序前端开发工具

一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的. 管理员可在小程序管理后台统一管理项目成员(包括开发者.体验者及其他成员).设置项目成员的权限,包括:开发者/体验者权限.登录小程序管理后台.开发管理.查看小程序数据分析等. 管理入口位于:小程序管理后台 - 用户身份 – 成员管理 权限 说明 开发者权限 可使用小程序开发者工具及开发版小程序进行开发 体验者权限 可使用体验版小程序 登录 可登录小程序管理后台,无需管理员确认 数据分析 使用小程序数据分析功能查看小程序数据 开发管理

网易云易盾推出面向微信小程序的大数据反作弊产品

近日,国内领先的业务风控服务网易云易盾对外推出面向微信小程序的大数据反作弊产品,源于网易20年的核心业务风控技术与全面稳健的策略模型,有机整合了设备指纹.IP画像.规则引擎等八大能力,可广泛应用电商营销.金融支付.生活服务类小程序场景,帮助企业防范微信小程序端的黑灰产作弊侵害. 易盾安全调查显示,小程序已成为企业业务风险环节新缺口 易盾安全经过调查发现,相比App,大部分互联网开发者还没有足够的能力利用小程序的特性建立起有效的风控策略."羊毛党"通过自己养号或着批量购买的大量微信号,就

微信小程序前端源码逻辑和工作流

看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLaunch: function ()

程序与页面—微信小程序前端开发工具

你可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据 logs.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好.紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式.最后客户端会装载 logs.js,你可以看到 logs.js 的大体内容就是: Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad: function () { // 页面渲染后 执行 } }) Page

微信小程序-开心大转盘(圆盘指针)代码分析

大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图:     界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没啥难度. 关键是 抽奖的动画,我们就是要小程序本身的动画: 界面加载的时候定义一个动画对象: onLoad(opt) { this.setPlateData(); //执行设置转盘表面的文字 let that = this; let aniData = wx.createAnimation({ //

微信小程序开发大神牛样本

微信小程序的推出,让很多App开发者忧喜参半.喜的是终于出现了一种全新的应用生态,不必再纠结于高昂开发成本的App:忧的是微信小程序开发人员需要增加学习成本,而非技术人员则更是无从下手开发具体流程如下:  1. 获取微信小程序的 AppID登录微信公众平台,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID .2. 创建项目我们需要通过开发者工具,来完成小程序创建和代码编辑.开发者工具安装完成后

微信小程序·前端-锦囊

<!-- Banner轮播图 start --> <view> <swiper autoplay="true" indicator-dots="true" circular='true' interval="1500" > <swiper-item> <image src='{{muke.image1}}'></image> </swiper-item> <

微信小程序前端调用后台方法并获取返回值

wxml代码 <wxs src="../../wxs/string.wxs" module="tools" /> <!-- 调用tools.img(item.content)返回bool,也可以返回其他值 --> <view class='clearfix' wx:if="{{tools.img(item.content)}}"> <view class='content-view'> <im