yangakw yangakw

微信小程序

in 记录read (87) 文章转载请注明来源!

入门小程序

官方文档

账号的申请就不多说了

百度经验

基本的配置

json配置

  1. 小程序配置 app.json

app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

2.项目配置project.config.json

请输入图片描述

3.页面下的配置 page.json
官方文档

模板wxml

在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色
他使用 新的标签 进行页面布局 详情参照
官方文档

WXSS 样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器

JS 交互逻辑

小程序使用类似 react vue 等mvvm 框架,所以小程序主要就是js 的开发,
小程序与标准网页的事件处理不一样,
它绑定事件的方式包括:

  • bind 不阻止事件冒泡响应
  • catch 阻止事件冒泡响应
    对应的事件有
  • touchstart 手指触摸
  • touchmove 手指触摸后移动
  • touchcancel 手指触摸动作被打断,如弹窗和来电提醒
  • touchend 手指触摸动作结束
  • tap 手指触摸后离开
  • longtap 手指触摸后后,超过350ms离开

DEMO

 <button bindtap="click_me">click</button>

 Page({
    click_me:function(){
        console.log("click success");
    }
 })

指令

指令是vue的说法,他在dom 的attr 中定义逻辑操作;
小程序采用类似 wx:if 的语法实现;
如:

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    is_show:false,
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    ....

<view wx:if="{{is_show}}"> show </view>
<view wx:else> not show</view>

数据绑定

数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:

//基本
<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})
//数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})
//列表渲染
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
//修改列表索引
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

模板

定义模板
使用 name 属性,作为模板的名字。然后在< _Template/>内定义代码片段,如:

< _Template name="msgItem">

{{index}}: {{msg}}
Time: {{time}}

</ _Template>

使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

< _Template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a _Template',
time: '2016-09-15'
}
}
})

# _Import
_Import可以在该文件中使用目标文件定义的_Template,

DEMO:
< _Template name="item"> {{text}} 在 index.wxml 中引用了 item.wxml,就可以使用item模板:

<_Import src="item.wxml"/>
<_Template is="item" data="{{text: 'forbar'}}"/>

_Import 的作用域
_Import 有作用域的概念,即只会 _Import 目标文件中定义的 _Template,而不会 _Import 目标文件 _Import 的 _Template。

如:C _Import B,B _Import A,在C中可以使用B定义的_Template,在B中可以使用A定义的_Template,但是C不能使用A定义的_Template。

_Import 的作用域
_Import 有作用域的概念,即只会 _Import 目标文件中定义的 _Template,而不会 _Import 目标文件 _Import 的 _Template。

如:C _Import B,B _Import A,在C中可以使用B定义的_Template,在B中可以使用A定义的_Template,但是C不能使用A定义的_Template。【不能继承作用域】
#  关键字 include
include 可以将目标文件除了 <_Template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置

#  wxs 运算符

... = ... 赋值 从右到左
... += ... 赋值 从右到左
... -= ... 赋值 从右到左
... *= ... 赋值 从右到左
... /= ... 赋值 从右到左
... %= ... 赋值 从右到左
... <<= ... 赋值 从右到左
... >>= ... 赋值 从右到左
... >>>= ... 赋值 从右到左
... &= ... 赋值 从右到左
... ^= ... 赋值 从右到左
... |= ... 赋值 从右到左

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

此处评论已关闭

博客已运行
© 2018 yangakw
PREVIOUS NEXT
雷姆
拉姆