微信小程序
sizzurp
分享下我的胜利果实
展开
-
navigator页面间跳转,传值,导航元素点击高亮,路由api
1. app.json 配置 pages节点,让他自动帮我们创建页面文件2. [page-name].json 文件内容为空报错[ pages/demo1/demo1.json.json 文件错误] pages/demo1/demo1.json: Empty file is NOT a valid json file微信小程序内部会将[page-name]文件夹内的所有文件渲染为一个文件,空的json文件会编译成空字符串不合法两种解决方法删除空json文件[page-name].json文件原创 2020-09-01 00:26:00 · 347 阅读 · 0 评论 -
基本组件总结(微信小程序)
组件的基本用法语法问题组件的使用是类似于HTML的方式(有不同),组件使用的严格的XML标准(开闭标签问题)组件的分类功能性的组件– 完成具体功能的布局类型的组件– 用来完成页面结构的(div)API 类型(使用的角度)– 通过调用一个方法来使用的...原创 2020-08-31 14:56:29 · 134 阅读 · 0 评论 -
界面交互API(微信小程序)
<!--index.wxml--><view class="container"> <button type="primary" bindtap="btnToDo">click me...</button></view>//index.js//获取应用实例const app = getApp()Page({ data: { }, //事件处理函数 btnToDo: function() { // // 当原创 2020-08-31 14:42:25 · 477 阅读 · 0 评论 -
表单组件(微信小程序)
<!--index.wxml--><view class="container"> <button type="warn">这是一个按钮</button> <button type="warm" size="mini" plain loading>这是一个按钮</button> <!-- hover 指的是按下, hover-class 指的就是按下过后的作用 Class --> <button ho原创 2020-08-31 14:24:13 · 218 阅读 · 0 评论 -
基础内容组件icon,progress,text
<!--index.wxml--><view class="container"> <!-- icon text progress --> <!-- iconType: [ 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear' ] --> <!-- type 用于定义图标类型,只能是规定范围的类型,原创 2020-08-31 02:05:28 · 208 阅读 · 0 评论 -
界面层条件渲染(微信小程序)
wx:if vs hidden因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidd原创 2020-08-31 00:16:59 · 147 阅读 · 0 评论 -
登录页面的两种表单数据绑定方式
<!--index.wxml--><!-- <view class="container"> <view class="inputs"> <input class="username" placeholder="请输入用户名" value="{{ username }}" bindinput="inputChangeHandle" data-prop="username" /> <input class="password"原创 2020-08-30 23:11:09 · 533 阅读 · 0 评论 -
单向数据流(微信小程序)
<!--index.wxml--><view class="container"> <input value="{{ message }}" bindinput="inputHandle" /> <text>{{ message }}</text></view>1. this.setData 是用来改变data中的数据2. 他与直接赋值区别在于 setData 可以通知界面做出变化3. 直接赋值没有办法实现这一点(.原创 2020-08-30 16:07:06 · 243 阅读 · 0 评论 -
界面层事件处理,事件冒泡,事件传参
1. 事件的基本使用 bind[xxx] catch[xxx]2. 小程序中事件冒泡和HTML中处理起来不一样 这里是使用catch[xxx]3. 如果需要给事件处理函数指定参数只能通过 dataset 方式<!--index.wxml--><view class="container"> <!-- 基本的事件使用 就是通过给组件添加一个 "bind + 事件名" 的属性,属性的值指向一个定义在当前页面对象中JS方法 --> <button bind原创 2020-08-30 15:34:52 · 263 阅读 · 0 评论 -
界面层数据绑定,列表渲染
[page-name].wxml<!--index.wxml--><!-- 框架最大的特点就是让我们开发者必须按照特定的方式编写代码--><!-- 1. 数据在哪(当前页面对象的data属性中) 2. 绑定到哪里去(想绑定到哪就在那里用mustache语法输出)--><view class="container"> <!-- 这种{{}}的语法叫做mustache --> <text>{{ message }}原创 2020-08-29 18:10:30 · 102 阅读 · 0 评论 -
页面文件组成
1. [page-name].js页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理// index.js// 获取应用实例// 完成页面的逻辑,包括功能的实现var app = getApp()Page()2. [page-name].wxml语法遵循XML语法,不是HTML语法<!--index.wxml--><!-- wxml: wei xin markup language --><!-- 基于XML语法,用来定义界面结构 --&原创 2020-08-29 17:11:42 · 232 阅读 · 0 评论 -
小程序项目结构
1. 逻辑 app.js调用一个App的方法(全局方法)// app.jsvar obj = {}// 调用一个App的方法(全局方法)App(obj)// 调用App方法的作用就是用来创建应用程序实例对象// 定义应用程序的生命周期事件2. 样式 app.wxss/**app.wxss**//*样式文件*//*CS3 flex布局*/.container {}...原创 2020-08-29 00:38:15 · 144 阅读 · 0 评论