小程序

1.底部导航--tarbar（小程序开发文档-框架-配置里面）

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

2.注册程序

App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

Object参数说明：

 

 

属性类型描述触发时机
onLaunch Function 生命周期回调—监听小程序初始化 小程序初始化完成时（全局只触发一次）
onShow Function 生命周期回调—监听小程序显示 小程序启动，或从后台进入前台显示时
onHide Function 生命周期回调—监听小程序隐藏 小程序从前台进入后台时
onError Function 错误监听函数 小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound Function 页面不存在监听函数 小程序要打开的页面不存在时触发，会带上页面信息回调该函数
其他 Any 开发者可以添加任意的函数或数据到 Object参数中，用 this 可以访问

3.注册页面的生命周期

data Object 页面的初始数据
onLoad Function 生命周期回调—监听页面加载
onShow Function 生命周期回调—监听页面显示
onReady Function 生命周期回调—监听页面初次渲染完成
onHide Function 生命周期回调—监听页面隐藏
onUnload Function 生命周期回调—监听页面卸载
onPullDownRefresh Function 监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件的处理函数
onTabItemTap Function 当前是 tab 页时，点击 tab 时触发

4.模块化

把一些公用的工具类函数放在utils里面，用module.exports去暴露，用require去引入

5.数据绑定与条件渲染

数据绑定使用 Mustache 语法（双大括号）将变量包起来，

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

<view class="usermotto" hidden="{{userid==6 ? true :false}}">方式1：用hidde的方式显示与隐藏
<text class="user-motto" id="user-{{userid}}">{{motto}}</text>
</view>
<view wx:if="{{userid==6}}">方式2：用if/else的方式
true
</view>
<view wx:else>
false
</view>

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

6.列表渲染与模板

  
  <view wx:for='{{array}}' wx:for-item='item' wx:key='index'>
       <text id='messageIndex-{{index}}'>{{index}}-{{item.message}}</text>
  </view>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

<template is="msgItem" data="{{...item}}"/>
<template name="msgItem">
　　
例子1：<template is="msgItem" data="{{...item}}"/>----使用模板用is,data的数据在对应的js里面申明
<template name="msgItem">---定义模板用name
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
例子2：

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
	<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
 

7.事件

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>用bind绑定事件，可以用e.target.id获取id，用e.target.dataset获取数据

事件绑定的写法同组件的属性，以 key、value 的形式。

  • key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
  • value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

8.引用

import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 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。


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

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

9.网络请求

  使用：
　　<view>
　　　　<button type='primary' bindtap='loadData'>加载数据</button>
　　</view>
<view wx:for='{{newsdata}}'>
    <image style='width:300px;height:200px;' src='{{item.thumbnail_pic_s}}'></image>
     [{{item.realtype}}]{{item.title}}
  </view>
请求：
loadData: function() {
var _this = this;
wx.request({
url: 'http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=top&count=10', //仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
_this.setData({
newsdata:res.data
})
}
})
}

 

posted @ 2018-11-02 14:51  徐肥美  阅读(528)  评论(0)    收藏  举报