小程序学习笔记

2017-04-26 本文已影响0人 summer_1874

ES6转ES5 只转换语法 ~~新的api不支持~~ 支持api转换
小程序目录结构
官方模板含.wxml .wxss .json .js
app.js app.json .app .wxss 全局配置同于公共类
wxss渲染遵循就近原则

应用程序人口app. - 1，2，3，4，5最多五级页面
同一级目录下命名必须一致，文件夹名称可不同，如index.wxml,index.wxss.....
<small>根级目录可先建文件夹。
只有text包裹的元素在手机端才可以长按选中
<text> 支持转义符
iphone6 750的宽度做原型图
文件自动关联--同名
style 动态 class 静态</small>

配置app.json
pages
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
<small>文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。</small>
window

  "window":{
    "navigationBarBackgroundColor": "#ffffff",//HexColor #000000  导航栏背景颜色，如"#000000"
    "navigationBarTextStyle": "black",//String white 导航栏标题颜色，仅支持 black/white
    "navigationBarTitleText": "微信接口功能演示",//String       导航栏标题文字内容
    "backgroundColor": "#eeeeee", //HexColor    #ffffff 窗口的背景色
    "backgroundTextStyle": "light", //String    dark    下拉背景字体、loading 图的样式，仅支持 dark/light
      "enablePullDownRefresh":false //Boolean   false   是否开启下拉刷新，详见页面相关事件处理函数。
  }
}```



- [Swiper组件](https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html)


- App.json里关于导航栏，标题的配置。
app.json除外json的文件，只能配置window，故而直接添加属性即可。

{
"window":{
"navigationBarBackgroundColor": "#b3d4db"
}
}
//无效
{
"navigationBarBackgroundColor": "#b3d4db"
}
//成功

- Page页面与应用程序的生命周期

Page({});
//默认顺序onLoad，onShow，onReady

-  **数据绑定（核心知识）**
单向数据绑定，js->wxml
`this.setData()`
`可通过setData({a:a});传参，this.data.a`

wx:if//显示，隐藏
wx:if="{{string}}";
wx:if="string";
wx:if="false";
wx:if="{{true}}"//显示字符串自动隐式转化为true;
wx:if="{{false}}";//隐藏

小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A
而这个动作A的执行，是在onLoad事件执行之后发生
- 数据绑定的运算与逻辑
- AppData区域介绍
- **事件与事件对象**
    - 事件绑定的写法同组件的属性，以 key、value 的形式。
 - <small>key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart</small>
  -  <small>value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。</small>

<view bindtap="onTap"></view>//绑定事件
<view catchtap="onTap"></view>//阻止事件冒泡
<block wx:for="{{postKey}}" wx:for-item="item">
<view catchtap="onTap" data-post-Id="{{posts.item}}">
<template is="Tplname" data="{{...item}}"/>
</view>
</block>//使用模板时得在tpl外（for内）包裹一层，添加事件。

             onTap:function(event){ 
              event.currentTarget.dataset.dataid//可获取自定义属性。
              //自定义属性以data-为前缀。跟就'-'来区分。会自动转换驼峰命名。
              //data-postId =>postid;data-post-id=>postId;data-post-Id=>postId
              //保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
                    wx:navigateTo({ 
                    url: 'String',//跳转路径同app.json page配置。无需后缀名。可带参数。
                    //"url?id="+parameter  onLoad:fuction(option){ option.id }接收参数。
                    success: function(res){
                    //success 成功后执行
                    },
                    fail: function(res) {
                    // fail 失败后执行
                    },
                    complete: function(res) {
                    // complete 无论失败或超过都执行
                    }
                    })
              //关闭当前页面，跳转到应用内的某个页面。
              wx.redirectTo({})
             }
-  **[缓存](https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxremovestoragesynckey)**
  - 无失效期。
  - 缓存上限最大不能超过10MB
  - 5类操作10种方法

wx.setStorage(OBJECT);
wx.setStorageSync(KEY,DATA);
wx.getStorage(OBJECT);
wx.getStorageSync(KEY);
wx.getStorageInfo(OBJECT);
wx.getStorageInfoSync
wx.removeStorage(OBJECT);
wx.removeStorageSync(KEY);
wx.clearStorage();
wx.clearStorageSync()

- **列表渲染**（核心知识）
    - wx:for

wx:for="{{array}}";
wx:for-item//可以指定数组当前元素的变量名
wx:for-index//可以指定数组当前下标的变量名

`wx:for`  用在 `<block/>`标签上，以渲染一个包含多节点的结构块。
`wx:for`可以嵌套
外部定义`pasts-data.js`
使用`module.exports={ posts_list:local_database}`导出函数，对象或原语。
`post.js`使用`var postsData = require("../../data/posts-data.js")`接收数据。
`postsData.posts_list`输出数据
**绝对路径无效 **
- Template模板的使用（核心知识）
  - 模板不是模块 js文件无效。
  - 命名以Tpl或其他标识符结尾。如posts-itme-Tpl。


     <template name="Tplname">//tpl不能添加事件。
     //content
     </template>
    //图片等文件的引入使用绝对路径
     //wxml引入
    <import src="绝对路径或相对路径" /> //注意闭合标签
     //wxml引用
    <template is="Tplname" data="{{item}}"/>
    //data="{{...item}}" ...展开itme中的键值对，则tpl中无需item作为前缀。
     //wxss 引用
     @import "绝对路径或相对路径";

- 音乐播放基本实现
  -  利用app.js中的全局变量来判断是否播放。

wx.playBackgroundAudio(OBJECT) //dataUrl title coverImgUrl 链接必须为网络链接
wx.pauseBackgroundAudio();//暂停播放
wx.onBackgroundAudioPlay(CALLBACK)//监听音乐播放。
wx.onBackgroundAudioPause(CALLBACK)//监听音乐暂停。

小程序学习笔记

猜你喜欢

热点阅读