美文网首页
小程序学习

小程序学习

作者: zyghhhh | 来源:发表于2020-01-14 15:35 被阅读0次

注册:

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

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

  2. 单位

    • flex单位是用rpx单位; 1rpx = 1物理像素 = 0.5css像素
    • 所以在拿到ui设计稿的时候如果设计稿是750就可以直接写了
  3. 事件绑定和数据绑定
    小程序中也有初始化数据概念,在data中声明数据,然后可以在.wxml文件中直接使用(同级目录)

    • 小程序中分为冒泡和非冒泡事件,以key:value的形式定义事件

      • 冒泡事件 key以bind开头 比如 bindtap 点击事件
      • 非冒泡时间 key以catch开头 比如 catchtap 点击事件
    • 事件传参

      1. 在绑定事件的标签上使用 data-xxx="要传递的数据"
      2. 在点击事件中会默认传入一个event对象,在这个对象中可以拿到 (具体位置是event.currentTarget.dataset)
  4. 更新数据
    this.setData({
    key:value
    })

  5. 模版
    文档: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就可以了
  6. 列表渲染
    文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

    • 列表渲染指令 wx:for=”{{数组}}“
    • 遍历出来的下标默认叫index,每一项默认叫item,遍历标签上需要加wx:key="{{index}}" 不然会爆出警告
    • 下表和每一项名字可以修改,详情看文档
    • wx:for 可以用一个block标签包裹住,渲染出一个包含多内容的节点(一个包裹容器)
    • wx:for还可以遍历字符串 但会把字符串当成一个数组去遍历
    • 详情参考文档
  7. 路由相关
    下列之比较常用 详情请参考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参数中拿到
  1. tab栏切换
    在文档全局配置中找tab,配置在全局的app.json中

  2. 小程序发请求
    wx.request(object)

    • 具体参数看文档

相关文章

  • 【值得收藏】微信小程序开发干货合集,快上车!

    小程序的成功,让广大程序员早已不再纠结该不该学习小程序开发 ,但会纠结如何学习小程序开发,为帮助大家更好的学习小程...

  • 微信小程序知识全景思维导图

    微信小程序思维导图 腾讯云小程序学习地址 小程序开发文档 小程序开发社区

  • 2018-08-31

    小程序学习

  • 微信小程序学习资源视频书籍免费

    搜索微信公众号【程序学习员】关注 回复“学习”领取小程序学习资源 ​​ 微信小程序源码:大转盘https://gi...

  • 小程序提交了!

    从零开发一款小程序项目——生活全能通!主要学习小程序的整个开发流程、学习小程序组件和API的使用。本项目仅用于学习...

  • 小程序学习

    禾匠【安装视频教程】链接:[https://pan.baidu.com/s/1e6PCliaIWGEY0_wMoo...

  • 小程序学习

    并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。 因为wx:if是一个控制属性,需要...

  • 小程序学习

    1.导航跳转的两种方式在.js 文件中实现函数跳转

  • 学习小程序

    网址:https://mp.weixin.qq.com/debug/wxadoc/dev/小程序入门学习资料网址:...

  • 小程序学习

    需求:添加一个页面,通过按钮触发事件,且可从首页跳转至该页面 如图,红框部分是添加的内容,其他的都是demo自带的...

网友评论

      本文标题:小程序学习

      本文链接:https://www.haomeiwen.com/subject/bbbboctx.html