高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年微信小程序开发需要(精选7篇)

微信小程序开发需要 第1篇

WXS(WeiXin Script)是小程序的一套脚本语言,结合WXML,可以构建出页面的结构。

注意:该.wxs文件可以被其他的.wxs文件 或 WXML 中的标签引用 

每个wxs模块均有一个内置的module对象,通过可以对外共享本模块的私有变量与函数。

在.wxs模块中引用其他wxs文件模块,可以使用require数。

注意

注意: 

注意:

属性: constructor:返回字符串“Number”

方法名

属性: constructor:返回字符串“String”

方法名

match

属性:constructor:返回字符串“Boolean”

属性:constructor:返回字符串“object”

方法 : 返回字符串“[object object]”

属性

方法

属性:

 属性:constructor:返回字符串“Date” 

toDateString

 基本示例

需求:有频繁用户交互的效果在小程序上表现是比较卡顿的,例如页面有 2 个元素 A 和 B,用户在 A 上做 touchmove 手势,要求 B 也跟随移动。

touchmove 事件的响应过程为:

一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染,通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟

注意: event是小程序事件对象基础上多了来表示触发事件的组件的ComponentDescriptor实例。ownerInstance表示的是触发事件的组件所在的组件的ComponentDescriptor实例,如果触发事件的组件是在页面内的,ownerInstance表示的是页面实例

注意:WXS函数必须用{{ }}括起来。当 prop 的值被设置 WXS 函数就会触发,而不只是值发生改变,所以在页面初始化的时候会调用一次WxsPropObserver的函数 

微信小程序开发需要 第2篇

组件这块,只写一些基本组件,一些其他的组件可以直接查阅微信小程序组件文档(太多了参数属性了,手写个人感觉不全面,所以请大家自行查阅官方文档)

属性说明

 属性说明:

渲染展示 :

nodes属性说明 

swiper

scroll-view

cover-image

cover-view

match-media

movable-area

movable-view

page-container

root-portal

view

注意:这里data里的images中是图片的地址,需要换成自己的图片地址

注意:这里data里的imgs为图片地址,需要自行修改成自己图片的地址 

video

微信小程序开发需要 第3篇

事件分为冒泡事件和非冒泡事件:

注意: 除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如from的submit事件,input的input事件,scroll-view的scroll事件这些都是非冒泡事件

示例:

正常捕获冒泡:

中断捕获阶段和取消冒泡阶段:

说明: 将正常捕获冒泡代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。

事件对象 

微信小程序开发需要 第4篇

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

基本用法示例

可以将wx:for用在标签上,以渲染一个包含多节点的结构块

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如input中的输入内容,switch的选中状态),需要使用wx:key来指定列表中项目的唯一的标识符

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率注意:如不提供wx:key,会报一个warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略

注意

基本示例 

目标结果

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用

注意:模版拥有自己的作用域,只能使用data传入的数据以及模版定义文件中定义的模块 

目标结果展示:

方法一(在内部使用wxs):

方法二(在wxml外部定义wxs):

目标渲染结果(通过使用外部定义wxs实现一些方法的调用): 

步骤一:创建wxs文件,并定义相关方法 

步骤二:导入wxs并使用

WXML 提供两种文件引用方式import和include

渲染结果展示

注意:import的作用域:只会import目标文件中定义的template,而不会import目标文件import的template,如C import B,B import A,在C中不能使用A定义的template 

结果显示 

微信小程序开发需要 第5篇

登录查看自己的appid

后面会跟着自己的appid,这里看不见是进行了处理

 第一次打开开发工具需要微信登录

 登录后进入项目管理页面

创建项目 

项目开发界面以及项目结构说明

微信小程序开发需要 第6篇

在项目中的pages/index/是单个页面的js脚本文件,在这个js文件中的Page字段为这个页面的入口程序

优点:便捷快速,小程序会自动在中的Pages字段中添加这个页面的路径,但是不默认是这个新建的页面为默认展示页面

缺点:该方法只生成单页面的基本文件,为方便文件架构,我们一般在Pages中手动创建一个文件夹,然后在这个文件夹里生成新的页面文件

补充:要展示的这个页面,要把页面的路径移动到第一个这个操作是在中

onLoad

onReady

onShow

onHide

onUnload

onPullDownRefresh

监听用户下拉动作

目标效果

微信小程序开发需要 第7篇

注意:多个插槽是根据name标签来区分内容的 

 文件结构:

compontents         |——demo1-com(子组件)         |    pages         |         |——demo1(父页面)

猜你喜欢