注册:
首先需要到微信公众平台注册账号,拿到appid,然后可以使用这个创建小程序,下载微信开发者工具开发(当然也可以使用vscode安装插件兼容语法进行开发),更多配置使用方法请翻阅开发者文档
- 结构目录
根目录下有这样四个文件 可以用来做全局的配置- .wxml 写结构
- .wxml 写样式
- .json 做全局配置(比如页面路径,全局背景颜色 标题颜色 内容等官网可以查阅)
- .js 逻辑层
-
布局
- 小程序一切基于组件化开发,没有dom的概念,官方推荐使用flex布局
http://www.runoob.com/w3cnote/flex-grammar.html flex学习网站
- 小程序一切基于组件化开发,没有dom的概念,官方推荐使用flex布局
-
单位
- flex单位是用rpx单位; 1rpx = 1物理像素 = 0.5css像素
- 所以在拿到ui设计稿的时候如果设计稿是750就可以直接写了
-
事件绑定和数据绑定
小程序中也有初始化数据概念,在data中声明数据,然后可以在.wxml文件中直接使用(同级目录)-
小程序中分为冒泡和非冒泡事件,以key:value的形式定义事件
- 冒泡事件 key以bind开头 比如 bindtap 点击事件
- 非冒泡时间 key以catch开头 比如 catchtap 点击事件
-
事件传参
- 在绑定事件的标签上使用 data-xxx="要传递的数据"
- 在点击事件中会默认传入一个event对象,在这个对象中可以拿到 (具体位置是event.currentTarget.dataset)
-
-
更新数据
this.setData({
key:value
}) -
模版
文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.htmltemplate:
- template可以理解为封装一个组件,需要的页面引入可以通过写一个标签引入他
<import name="tpl" src="路径" data="{{...item}}">- 那个页面需要引入就在那个页面的文件中使用这个标签引入(当前的.wxml)
- 模版需要添加一个name属性,方便在引入的时候通过is指定要用的是哪个模版
- 模版的样式需要在引入页面的样式文件中引入(当前页面的.wxss文件)
使用 @import '路径' 这样的方式引入 - 给template传入的数据不用item.xxx,直接写key就可以了
- template可以理解为封装一个组件,需要的页面引入可以通过写一个标签引入他
-
列表渲染
文档: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)- 具体参数看文档
网友评论