小程序学习

2020-01-14 本文已影响0人 zyghhhh

注册：

首先需要到微信公众平台注册账号,拿到appid，然后可以使用这个创建小程序,下载微信开发者工具开发(当然也可以使用vscode安装插件兼容语法进行开发)，更多配置使用方法请翻阅开发者文档

结构目录
根目录下有这样四个文件可以用来做全局的配置
- .wxml 写结构
- .wxml 写样式
- .json 做全局配置(比如页面路径,全局背景颜色标题颜色内容等官网可以查阅)
- .js 逻辑层

布局
- 小程序一切基于组件化开发,没有dom的概念,官方推荐使用flex布局
  http://www.runoob.com/w3cnote/flex-grammar.html flex学习网站
单位
- flex单位是用rpx单位; 1rpx = 1物理像素 = 0.5css像素
- 所以在拿到ui设计稿的时候如果设计稿是750就可以直接写了
事件绑定和数据绑定
小程序中也有初始化数据概念,在data中声明数据，然后可以在.wxml文件中直接使用（同级目录）
- 小程序中分为冒泡和非冒泡事件,以key:value的形式定义事件
  - 冒泡事件 key以bind开头比如 bindtap 点击事件
  - 非冒泡时间 key以catch开头比如 catchtap 点击事件
- 事件传参
  1. 在绑定事件的标签上使用 data-xxx="要传递的数据"
  2. 在点击事件中会默认传入一个event对象,在这个对象中可以拿到 (具体位置是event.currentTarget.dataset)
更新数据
this.setData({
key:value
})
模版
文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html

template:
- template可以理解为封装一个组件,需要的页面引入可以通过写一个标签引入他
  <import name="tpl" src="路径" data="{{...item}}">
  - 那个页面需要引入就在那个页面的文件中使用这个标签引入(当前的.wxml)
  - 模版需要添加一个name属性,方便在引入的时候通过is指定要用的是哪个模版
  - 模版的样式需要在引入页面的样式文件中引入(当前页面的.wxss文件)
    使用 @import '路径' 这样的方式引入
  - 给template传入的数据不用item.xxx，直接写key就可以了
列表渲染
文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
- 列表渲染指令 wx:for=”{{数组}}“
- 遍历出来的下标默认叫index，每一项默认叫item，遍历标签上需要加wx:key="{{index}}" 不然会爆出警告
- 下表和每一项名字可以修改,详情看文档
- wx:for 可以用一个block标签包裹住,渲染出一个包含多内容的节点(一个包裹容器)
- wx:for还可以遍历字符串但会把字符串当成一个数组去遍历
- 详情参考文档
路由相关
下列之比较常用详情请参考api文档路由部分 https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

编程式路由导航
- 跳转
  - wx.navgationTo 跳转后可以返回
  - wx.redirectTo 跳转后不可返回
  - wx.navgationBack 跳回上一级,也可以设置跳回多级
- 传参
  可以使用类似查询字符串形式的
```
  wx.navigateTo({
      路由传参可以通过这种类似查询字符串的形式,数据可以在子页面的onload的options中可以接收到
        url:'/page/detail/detail?index='+ index//,   //key:value形式 

  })
```

标签形式跳转

navigator标签
- 使用: 指定url属性属性值为要跳转到的路径
- 传参: 直接在路径后面拼串,类似查询字符串,key:value形式。比如 /detail?index={{index}}值可以在跳转页面的onload生命周期函数的options参数中拿到

tab栏切换
在文档全局配置中找tab,配置在全局的app.json中
小程序发请求
wx.request(object)
- 具体参数看文档

小程序学习

注册：

编程式路由导航

标签形式跳转

猜你喜欢

热点阅读