类似于页面,一个自定义组件由json、wxml、wxss、js四个文件组成
在上期文章中,FinClip的工程师和我们主要聊了聊如何写出小程序的样式内容。在本期文章中,我们来看一下如何在小程序中使用 js 的,即在小程序中使用脚本内容处理内容或样式的改变。
官方文档—(WXML介绍) WXML(WeiXin Markup Language),是一套标签语言,和组件结合一起使用,用来构建页面的结构
数据绑定 # js Page({ /** * 页面的初始数据 */ data: { time: (new Date()).toString() }, }) # wxml <text>当前时间:{{time}} </text> # 属性动态改变 <text data-test="{{test}}"> hello world</text> ##需要注意的是变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量。 条件
使用ArcGisJS开发地图,首先需要引入ArcGis的Js文件和CSS文件,引入方式有两种,一种是官网JS引用,一种是本地JS引用。如下:
微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到,记录一下,虽然很简单,但是对于刚刚接触的人来说,看文档不如看demo来的快和方便。 先看一下官方给出的文档:
wx:for:在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
github地址:https://github.com/yexiaochai/wxdemo
uni-app的web-view组件,支持加载远程网页,在app环境下,还支持加载本地HTML页面。
之前学了 vue2.5,并且做了一个模仿 去哪网界面,越是学的后面,越是发现 vue 的语法和微信小程序的语法是非常相似,这次把微信小程序基础重新捡起来,毕竟从去年暑假学完小程序到现在过去了挺长时间的,这次基础语法迅速过一遍,就开始做项目了,冲冲冲
将js分成不同的几个模块后,然后使用文件引入,但是会出现问题:如果使用var 声明变量,那么就会成为全局变量,这样容易覆盖.
我们知道小程序最开始出来的时候,包括到现在;官方给出的写法是js对应逻辑层,wxml也自己尝试了一套DSL自定义视图的模板语法,写法雷同vue的template语法:
你只需要看完上面那篇文章和掌握一些前端开发基础,就足以自行编写一个 Chrome 插件。本文也是基于上面文章加上自己之前写的插件所记。
定义一个变量为isShow,在js的页面的初始数据data里面变换true或false
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。 将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。 WXML用于描述页面的结构。WXS是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。WXSS 用于描述页面的样式。 说了那么多,我来概括下: WXML 相当于HTML WXS 相当于JavaScript WXSS 相当于Css 为什么这么说呢?因为它们的语法基本一样,所以当一个完整的小程序能运行时,这三点都需要有,wxml和wxss用于渲染页面结构,而一些点击事件,比如用户完成登陆点击、跳转等等 是需要用js来完成的
前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来:
最近手头的工作繁多,有研究性的项目和系统研发,正好遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件。因为身在H5-Hybird的框架部门,最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动,学了点Object-c,这次正好借此机会进入App开发,以弥补自己在Native-App上的经验不足。
总结一下当前的内容 wxs类似于一门脚本语言,使用的是导出的方式来进行和wxml进行连接,类似于node.js wxml为页面显示的文件,类似于网页中的html文件 json为配置文件,可以进行对页面内容的配置。 wxss为css配置文件,可以进行css的配置。 js 为进行处理回调,以及页面数据绑定的文件
代码很简单,就是加载 App.js 中的 App 组件,然后使用 AppRegistry.registerComponent() 函数注册组件和初始化。
查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/
MVC设计模式基本思想就将项目层次分解为Model(模型层)、View(视图层)、Controller(控制层)。
有时候想同时展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar(侧导航)和(主内容)2个视图,这个时候命名视图就派上用场了。 你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口,如果router-view没有设置名字,那么就默认为default <router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> 一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件,确保正确使用components
一、小程序文档笔记 默认开发目录 开发目录解析 1. app.js、app.json、app.wxss 这三个文件必须有不能删掉。 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录
最近工作需要研究了一下React Native 的工作流程,理了一下 React Native 是怎么把控件最终渲染在屏幕上的。 在开始研究这个问题之前,我们缕一下我们的困惑:
小程序是一个不需要下载安装就可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下即可打开应用。也体现了用完即走的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。从字面上看小程序具有类似Web应用的热部署能力,在功能上又接近于原生APP。
自定义组件由 json、wxml、wxss、js 四个文件组成,我们通常是在根目录下创建一个文件夹——components,在该文件夹中存放我们自定义的公共组件。
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
day02 微信小程序 1. 跳转 1.1 对标签绑定点击事件 <view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view> Page({ ... /** * 点击绑定的事件 */ clickMe:function(e){ var nid = e.currentTarget.dataset.nid; console.log(nid); } }) 1.2 页面跳转 wx.navigateTo({
传统的h5只有1端,即浏览器。而uni-app可跨多端,虽仍属前端,与传统h5有不同。 如果你对h5比较了解,可通过本文快速了解uni-app。
效果展示 Demo代码 wxml <view class="loading"> <view class="dot" animation="{{alpha
codrops 一系列具有相当具有创意且有趣的前端效果的集合,是非常棒的学习资料,可以欣赏和下载使用。并且有些项目,也托管到了github仓库中
作 者:小明小明长大了 来 源:https://www.jianshu.com/p/72ca8192f7b8
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路 下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解 整体结构 默认示例项目的目录结构 从后缀名
1.分析:什么时候要写组件呢? 举例如下图,一个页面中被反复引用的东西,可以将它提取出来写成一个组件。
在事件的捕捉中可以使用 bind 以及 catch,下面以简单的实例给大家展示一下事件冒泡
简介 项目主页: https://github.com/bang590/JSPatch 示例下载: https://github.com/ios122/ios122 JSPatch 可以让你用 Jav
上一篇《浅谈HTML5单页面架构(一)——requirejs + angular + angular-route》探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbon
该组件是一个浏览器组件,可以承载网页的内容。而且该组件是全屏的,会覆盖该组件之外的其他内容。
在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的URL上使用,限制了其灵活性
第一章:小程序初级入门教程 小试牛刀【含视频】 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝试着写一个最简单的例子,包含 2 个静态
1,template 引用 涉及到页面布局相同,内容不同的可以用template引用 方式一: <import src="./person-card.swan" /> <template is="person-card" data="{{person}}" /> 方式二: <include src="header.swan" /> 2.filter过滤器 Filter 文件命名方式为:模块名.filter.js; Filter 通过 export default 方式对外暴露其内部的私有函数; Filt
uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序,大大降低了移动开发的成本。网络请求更是每个前端项目必备的技术,所以有必要进行前端网络请求的封装,今天小编给大家介绍一下,如何基于uniapp实现网络请求的简单封装,希望对新手能有所帮助!
原文地址:http://docs.sencha.com/extjs/4.0.7/#!/guide/mvc_pt2
领取专属 10元无门槛券
手把手带您无忧上云