1.小程序的权限列表少了智能控制接口
2.把图片转换成base64
将一副图片数据编码成一串字符串，使用字符串代替图片地址
可以减少http请求
加密：让用户一眼看不出图片的内容
方便引用
可逆的编码方式：
适合在http mime协议下快速传输数据
base64.encode()
base64.decode()
setCookie
getCookie
3.组件之间的数据传递
属性绑定
事件绑定
vuex
state
或者导入mapState
Mutation函数修改state里面的数据
在组件中使用this.$store.commit(‘add’)调用该方法
Mutations:可以在触发的时候传递参数
Mutations: {
addN(state,step) {
state.count+=step
}
}
在调用的时候
this.$store.commit(‘addN’,3)
触发mutations的第二种方式：导入mapMutations函数
import { mapMutations } from ‘vuex’
methods: {
…mapMutations([‘add’.‘addN’]}
}
调用的时候就是this.add()即可
传值的时候：
this.addN(3)
在Mutations中不能写异步的代码
那么怎么操作异步事件呢
Action 用于处理异步任务
但在Action 中还是要通过触发Mutation的方式间接变更数据
actions: {
addA(context) {
setTimeout(()=>{
context.commit(‘add’)
},1000)
}
}
触发这个函数：this.$store.disPatch(‘addA’)
在actions中不能直接修改state中的数据，必须通过context.commit()触发某个mutations才行
因为只有mutations中的函数才有权力去修改state中的数据
commit用来触发某个mutation
disPatch用来触发某个action
触发actions异步的时候携带参数
触发：this.$store.disPatch(‘addA’,5)
actions接收：addA(context,step)
context.commit(;add’,step)
mutations接收：
add(state,step){}
触发actions的第二种方式：
导入 mapActions
映射：…mapActions([’’])
使用：this.函数名
Getter用于对store中的数据进行加工处理形成新的数据
使用getters的第一种方式;this.$store.getters.
第二种方式：mapGetters
导入mapGetters
计算属性：…mapGetters([’’])
使用：this.
trim()除了单词之间的空格外，移除文本中的所有空格
// 根据id删除对应的任务事项
removeItem(state,id){
const i = stae.list.findIndex(x=>x.id=
id)
if (i!
-1){
state.list.splice(i,1)
}
}
}
// 统计未完成的任务条数
unDoneLen(state){
return state.list.filter(x=>x.done===false).length
}
编程
计算机程序
机器语言 汇编语言 高级语言
编程语言 格式词汇 控制计算机
翻译器
标记语言 用来读取
数据存储单位
cpu读的的内存中的代码
js
数组:一组数据的集合
利用数组字面量来创建数组
数组里面的数据用，分隔
取数组 遍历数组
小程序 ：无需下载卸载 无需适配 社交 即用即走 随手可得
px:绝对单位为
rpx:相对长度一半 响应式单位
px:rpx=1;2
navigator url 链接
text元素的内容只能是纯文本 不能添加链接
display:inline 可以不换行 当作行内元素
open-type=“navigator”
nav-hover点击样式
nav-default默认样式
默认样式需要放在点击样式之前
当页面为tabbar时 不能再跳转了 那么 open-type=“switchtab”
全局配置 window:
数据绑定：映射 page页面中的data属性
把data中的值渲染到页面之上 {
{data}} 跟vue中的是一样的
运算表达式 条件表达式 三点运算符
编辑器 查看 修改 appdata可以看到数据 跟vue中的调试差不多
视图层view 逻辑层 js 数据绑定和事件机制 交互行为
条件渲染 当条件成立的时候才会使用
先把元素定义出来 再给与条件
wx:if=”” 根据条件是否成立来展示
使用条件渲染和hidden属性的区别：频繁切换，不建议使用条件
hidden只是不呈现 还是渲染，if 是当条件为真的时候才渲染
频繁切换用hidden 偶尔切换用if
v-if v-show(css之间切换)
列表渲染 类似循环语句
命名规范 语义化 驼峰式
循环 wx:for 绑定属性 针对数组生成 通过item 可以访问到每个数据
item是对数组的遍历 index的值 为下标
swiper组件 swiper-item每一张幻灯片
current=“0” 设置幻灯片的页数 换成最后一页的序号 arr.length
在最后一页的时候增加一个返回按钮 条件 渲染
position:定位
页面色生命周期函数
onLoad:页面加载的时候 初始化
this.data.current 取得值
setData赋值
onShow 每一次页面显示的时候会调用
onReady
onHide
onUnload
更新数据：逻辑层更新 this.setData()进行更新 不能直接赋值写入的方式
this.setData({
count:this.data.count+1
})
真正的更新 某一小部分数据进行更新
视图层 更新的时候 逻辑层的数据不会发生变化 是单向绑定
事件机制 ： 冒泡事件和非冒泡事件
bindtap catchtap
冒泡事件：向上传递给父元素的事件 bindtap
catchtap会阻止冒泡事件
组件的自定义属性
绑定bindtap事件处理函数 ： 实现页面的跳转 data-use-name=”” 自定义的数据属性
封装事件对象 data-id=”{
{item.id}}” 在函数中function(event)
event.currentTarget.dataset
wx.navigatoeTo wx.redirectTo …
?id=””传递参数
在页面初始化的时候获取query参数 ：onLoad(options)
当跳转到一个页面的时候 会执行onLoad方法
options参数对象 options.id
然后通过setData方法将接收到的数据保存到data中
小程序发起网络请求
wx.request({
url : ‘’
method : ‘’
data : {
x : 1,
y: 2
}
header: {
}
success: function(res){}
fail:function(){}
complete:function(){}
})
动态设置loading
两个方法
页面事件处理函数与兹定于页面转发
onShowAppMessage:function(){
return {
title: ‘’
}
}
在有上角… 分享
组件化开发 ：
多页面开发 表单处理 图片选择存储 页面数据同步 本地数据储存 自定义组件
什么是组件 ： 业务逻辑和功能进行封装
高内聚 可复用
如何定义一个组件
钩子方法
视图组件 表单组件 基础内容 导航组件
配置 事件
构建和引入组件
json
前端页面优化：加载速度更快
成本更低
扩展性好
代码语义化
seo