网站要怎么做才专业,小视频做网站怎么赚钱,flashfxp怎么做网站,网站维护流程小程序开发框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分#xff1a;逻辑层#xff08;App Service#xff09;和 视图层#xff08;View#xff09;。
小程序提供了自己的视…小程序开发框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分逻辑层App Service和 视图层View。
小程序提供了自己的视图层描述语言 WXML 和 WXSS以及基于 JavaScript 的逻辑层框架并在视图层与逻辑层间提供了数据传输和事件系统让开发者能够专注于数据与逻辑
WXML 语法参数 (参考官网)
WXML 语法参数链接
1. 数据绑定
双括号和vue、react的对比 运算三元方法调用 (不行) 属性可以使用{{}}
2. 条件渲染
wx:ifwx:if 和 wx:elif wx:elseblockwx:if 和 hidden
####3. 列表渲染
wx:for 遍历简单类型数组wx:for 遍历对象数组起别名 wx:for-item‘it’ wx:for-index‘i’wx:key
WXS 语法参考 (参考官网)
.wxs 文件wxs标 第一种方式 : 单独创建一个.wxs文件1. 创建common.wxs文件2. 创建一个方法 function my_slice(str) { return str.slice(0,1)}3. module.exports.my_slicemy_slice4. 引入 wxs src./common.wxs moduletool5. 使用 : view{{ tool.my_slice(str) }}/view第二种方式 : 在 wxml内 使用 wxs 标签处理1. 创建一个 wxs 标签 wxs/wxs2. 创建方法 function my_case(str) { return str.toUpperCase() }3. 导出 module.exports.my_case my_case4. 使用模块接收 wxs moduletool1/wxs5. 使用 tool1.my_case(str)事件绑定
1. bindTap
绑定事件
button bindtapclick1按钮1/button事件处理函数
Page({click1() {console.log(111)}
})传参
// 传递
button bindtapclick2 data-msgabc data-index123按钮2/button// 接收
click2(e){ e.currentTarget.dataset
},2. catchTap 阻止冒泡
view bindtapclick0button bindtapclick1按钮1/button button catchtapclick2按钮2/button
/view3. bindinput
绑定事件
input bindinputhandleInput /事件处理函数
Page({// 绑定的事件handleInput: function(e) {e.detail.value}
})数据操作 setData1 [setData2](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object data, Function callback)) 获取数据 : this.data.name 修改数据 : 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的还会造成数据不一致。setData 函数用于将数据从逻辑层发送到视图层异步同时改变对应的 this.data 的值同步。
console.log(this.data.name) // zs
this.setData({name :ls
})
console.log(this.data.name) // ls WXSS WXSS链接 WXSS(WeiXin Style Sheets)是一套样式语言用于描述 WXML 的组件样式。 与 CSS 相比WXSS 扩展的特性有 响应式长度单位 rpx样式导入
1. 尺寸单位 rpxresponsive pixel: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上屏幕宽度为375px共有750个物理像素则750rpx 375px 750物理像素1rpx 0.5px 1物理像素。 官网建议开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意 在较小的屏幕上不可避免的会有一些毛刺请在开发时尽量避免这种情况。
2. 样式导入
使用import语句可以导入外联样式表import后跟需要导入的外联样式表的相对路径用;表示语句结束。
/* app.wxss */
import common.wxss;.middle {color : red
}3. 行内样式
view stylecolor : red;啊哈/view4. 选择器
目前支持的选择器有
选择器样例样例描述.class.intro选择所有拥有 class“intro” 的组件#id#firstname选择拥有 id“firstname” 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件nth-child(n)view:nth-child(n)选择某个索引的标签::afterview::after在 view 组件后边插入内容::beforeview::before在 view 组件前边插入内容
注意 : 小程序 不支持通配符 * 样式初始化配置
page,view,input,text {margin: 0;padding: 0;box-sizing: border-box;
}5. 小程序使用less
原生小程序不支持less我们可以借助 vscode 使用 less 编辑器是vscode 安装 VSCode插件 : easy less 在vs code的设置中加入如下配置 less.compile: {outExt: .wxss
}新建 less文件如 index.less, 保存即可, 自动机会编程出样式到对应的index.wxss 里面 要么只用less ,要么只用 wxss 不要混着用,后果很严重, 因为 wxss的东西被会覆盖掉 less wxss wxml 自定义组件 类似 vue 和 react 中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面。
1. 创建自定义组件
创建文件夹 components/创建 组件 文件夹 Test/右键 新建 Component
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FL1bY39c-1595140559959)(D:\黑马课程\备课\05-小程序\整理最新笔记代码★\md-imgs\组件1.png)]
注意声明组件 (一般情况下是声明过了) 在组件的 json 文件中进行自定义组件声明
// Test.json
{component: true // 声明组件
}注意注册组件 (一般情况下 也已经注册过了)
Component({/*** 1. 组件的属性列表 - 外界传进来的数据*/properties: {name : {type : String,value :初始值}},/*** 2. 组件的初始数据 - 组件自己的私有数据*/data: {},/*** 3. 组件的方法列表*/methods: {}
})
3. 引入组件
首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径
// index.wxml 想使用组件的话, 就要在 index.json 里 先引入
{usingComponents: {// 要使用的组件的名称 // 组件的路径Test:/components/Test/Test}
}####4. 使用组件
Test/Test法列表 */ methods: { } })
#### 3. 引入组件- 首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径js
// index.wxml 想使用组件的话, 就要在 index.json 里 先引入
{usingComponents: {// 要使用的组件的名称 // 组件的路径Test:/components/Test/Test}
}####4. 使用组件
Test/Test
