小程序是一种不需要下载安装即可使用的应用,它实现了应用‘触手可及’的梦想,用户扫一扫或者搜索一下即可找到应用,也体现了‘用完即走’的理念,用户不用关心是否安装了太多应用的问题。应用无处不在,随时可用,但又无需安装卸载。
什么时候选择小程序去开发?
原生应用 — 高频/重要
小程序 — 低频/不重要(优先选择小程序)
微信四大号:
订阅号 – 交互功能差,用户体验差,适用于展示类,查看;
服务号
企业号
应用号(小程序)
小程序采用了javascriptCore动态解析( JavaScriptCore是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。 )但和js没有关系
大量借鉴react.js+reactNativ.js思想,在写法上和vue很相似。
小程序中是有目录规范的,后缀不同,名字相同会自动关联
apI参考官方文档
小程序中特有单位rpx,可以根据屏幕宽度进行自适应
开发推荐在375的屏幕中做,因为是px的两倍
375 px = 750 rpx = 750物理像素
注意:App.json不能写任何注释
App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
数据绑定:
双括号具备解析变量的能力。{{}}
简单绑定: {{ message }}
组件属性(需要在双引号之内):
控制属性(需要在双引号之内):
关键字(需要在双引号之内):
数组遍历: {{item}}
{{index}}=下标 {{item}}遍历到的数据值
wx:for-index=“i”可以指定数组当前下标的变量名: {{i}} ={{index}}
wx:for-item=“a” 可以指定数组当前元素的变量名 : {{a}}={{item}}
wx:for用在标签上,以渲染一个包含多节点的结构块
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态,需要使用 wx:key 来指定列表中项目的唯一的标识符。
定义模板
使用name属性,作为模板的名字。然后在内定义代码片段
哈哈哈哈{{str}}
使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入
事件绑定
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
Eg:
bindtap="handleTap1”
catchtap="handleTap2”
最后可以尝试写一个todolist
Tip:获取表单元素的value
function(e){
e.detail.value==表单元素的value
}
function(e){
e.target.dataset.index==输出列表元素的下标
}
Bindinput:input发生改变触发的事件
<input type="text" bindinput="getval" value="{{val}}"/>
事件传参数 通过data-变量名= 获取参数通过 e.target
html
<view>
<input type="text" placeholder="todolist" bindinput="getval" value="{{value}}"></input>
<button bindtap="add">发布</button>
<view wx:for="{{list}}" wx:key="{{index}}">
{{item}}
<button bindtap="del" size="mini" id="{{index}}" >删除</button>
</view>
</view>
js
data: {
list:[],
val:'',
value:''
},
getval(e){
this.data.val = e.detail.value
},
add(){
this.data.list.push(this.data.val) //添加
this.setData({
list:this.data.list
}) //更新视图
this.setData({ value:''}) //输入框点击后清空
},
del(e){
this.data.list.splice(e.target.id,1) //删除
this.setData({
list: this.data.list
}) //更新视图
},