微信小程序开发需要 第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(父页面)