美文网首页
小程序基本语法

小程序基本语法

作者: 我的钱包瘪瘪的 | 来源:发表于2018-11-27 19:47 被阅读0次

项目demo: https://github.com/Aluka-w/oldIsland-wx

逻辑层 (js)

生命周期

app.js

  1. onLounch(只调用一次) -> onShow -> 依次注册好各个页面组件

page.js

  1. onLoad(首页加载) -> onShow -> onReady

setData更改data值

  1. 用例:
  //异步操作
  this.setData({
    // 数组或者对象的属性, 必须字符串才生效, 要不然直接报错
    'object.text': '新值',
    'array[0].text': '新值'
  }, () => [
    // 更新完数据的回调
  ])

导航

  1. navigateTo 只能导航到本页面的子组件内

  2. 例子的完整路径: pages/home/tip/tip

  3. 声明式: <navigator open-type="navigateTo" url='tip/tip'> 跳转页面 </navigator>

  4. 编程式: wx.navigateTo({ url: 'tip/tip'})

  5. 类似的有:

  6. 页面重定向: wx.redirectTo<navigator open-type="redirectTo"/> 页面会销毁

  7. 页面返回: wx.navigateBack<navigator open-type="navigateBack"> 页面会销毁

  8. tab栏切换 wx.switchTab<navigator open-type="switchTab"/>

  9. 重启本页面 wx.reLaunch<navigator open-type="reLaunch"/> 页面会销毁

  10. Tip

  11. navigateTo, redirectTo 只能打开非 tabBar 页面

  12. switchTab 只能打开 tabBar 页面

  13. reLaunch 可以打开任意页面

模块化

  1. getApp() 获取全局的数据, 全局的数据可以在APP()中设置

  2. commonjs规范

  3. 导出: module.exports.sayHi = sayHi / exports.sayHi = sayHi

  4. 导入: var sayHi = require('sayHi')

API

  1. 事件监听 API: wx.onSocketOpen(Fn) 回调函数, 返回值为回调函数的参数
  wx.onSocketOpen(function (res) {
    console.log(res.direction)
  })
  1. 同步 API: wx.setStorageSync 返回值是return出来, 有错会抛出

  2. 异步 API: wx.login 接受参数

  wx.login({
  success(res) {
    console.log(res.code)
  },
  fail() {

  }
})

视图层

WXML

<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

数据绑定: <view> {{message}} </view>

  1. Mustache 语法

  2. 组件属性(需要在双引号之内), boolean 也需要"{{true}}"

  3. 花括号和引号之间如果有空格,将最终被解析成为字符串

  4. 拓展运算符

  <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
  Page({
    data: {
      obj1: { a: 1, b: 2 },
      obj2: { c: 3, d: 4 }
    }
  })
  // 最后是 {a: 1, b: 2, c: 3, d: 4, e: 5}

列表渲染: <view wx:for="{{array}}" wx:for-index="idx" wx:key="idx"> {{item}} </view>

  1. 默认直接用index 和 item

  2. 别名: wx:for-index='idx' 就是把index改成了idx

  3. wx:for="array" 遍历一个字符串, 解析出来 a, r, r, a, y

  4. 花括号和引号之间如果有空格,将最终被解析成为字符串 wx:for="{{array}} " => wx:for="{{array + ''}}"

  5. key值的*this代表item本身当key值

条件渲染: <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>

  1. wx:if 和 wx:hidden 就相当于 v-if 和 v-show

模板

  1. 模板定义代码片段, 然后需要的地方引用, name属性代表模板

  2. 声明: <template name="msgItem"><view>{{item}}</view></view></template>

  3. 引用: 使用is关键字data为数据: <template is="msgItem" data="{{...item}}"/>

事件: <view bindtap="add"> {{count}} </view>

  1. bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡(catch事件单单只触发本身)

  2. 捕获

  3. 事件对象:

    dataset: 里面可以以data-开头,多个单词由连字符-链接,不能有大写, 传递数据

引用

  1. WXML 提供两种文件引用方式import和include

  2. import

  3. <import src="a.wxml"/>

  4. import的作用域: 只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template

  5. include

  6. include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置

WXSS

  1. rpx(responsive pixel): 可以根据屏幕宽度进行自适应, 如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素
iphone6 上才是二倍的换算
  1. 样式导入: @import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径

  2. 适配思路: rpx和px的抉择: font-size(px)

  3. 全局样式: 在app.wxss中定义, 组件有部分样式是不能继承全局样式: 比如font, color可以被继承, 其他不能9

`page{font-size: 24rpx}`, 因为小程序自动在每一页加page为最外层标签

WXS

  1. 例子
  <wxs module="m1">
    var msg = "hello world";

    module.exports.message = msg;
  </wxs>

  <view> {{m1.message}} </view>
  1. 概念: 编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内

  2. wxml中引用: 引用.wxs的文件的相对路径 <wxs src="./../tools.wxs" module="tools" />, 使用 <view>{{tools.msg}}</view>

  3. wxs中引用: 使用 require 函数

组件

内置组件

自定义组件

声明自定义组件

  1. 自定义组件放在components文件夹下 -> 创建的时候是创建的components而不是page -> 区别就是app.json中是找不到路径的 -> 否则引用组件时候是找不到的

  2. wxss:

  3. 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器

  4. js:

  5. Component构造器: 相当于页面的Page({})

  6. properties => 相当于Vue的props

  7. wxml:

  8. json:

  9. "component": true // 表示是组件

使用自定义组件的组件

  1. 在json文件中声明
  {
"usingComponents": {
    "你自定义的组件名": "组件的位置, 可以绝对路径也可以相对路径",
    "component-tag-name": "path/to/the/custom/component"
  }
}
  1. 使用: 直接使用json中命名的名称

组件传值

总结: 项目并未完全完成, 留待之后补充~

相关文章

  • 小程序基本语法

    项目demo: https://github.com/Aluka-w/oldIsland-wx 逻辑层 (js) ...

  • 小程序 基本语法

    小程序 基本语法 列表渲染: wx:for项的变量名默认为 item wx:for-item 可以指定数...

  • 2018-10-22

    授权 基本语法:句句解析 个人中心 商城 小程序-系列教程 逻辑清晰_小程序

  • 小程序介绍

    我对小程序的理解 小程序基本语法介绍 实现一个简单的小程序 1.我对小程序的理解 小程序是有别于传统web、h5、...

  • 微信小程序基本语法

    一、简单介绍 小程序不是运行在浏览器中,所以没有 DOM 和 BOM 对象 小程序的 JS 有一些额外的成员 Ap...

  • 好程序员web前端培训分享HTML基本结构和基本语法

    好程序员web前端培训分享HTML基本结构和基本语法 HTML基本结构 HTML的基本语法 1、<常规标记><标记...

  • JAVA语法基础Demo练习

    ATM取款机Demo小程序JAVA基本逻辑练习小程序,非常适合初学者学完基础语法后对自己的知识进行总结时练习使用。...

  • tag 单选标签效果

    2021-04-29 [微信小程序开发笔记(九)--单选标签效果] // uniapp语法 //原生小程序的语法:...

  • 小程序语法

    小程序App App(Object object) 注册小程序。接受一个Object 参数,其指定小程序的生命周期...

  • 小程序语法

网友评论

      本文标题:小程序基本语法

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