小程序开发速记

买了掘金一个小程序的小册，终于发现gulp还是蛮好用。。小测作者提供了一个项目手脚架，点github

------

1.不打算用微信开发者工具，想用vscode？

solution：

--自己开一个项目A，将微信项目的文件粘贴到A的其中一个文件夹(比如src)。

--通过gulp将src文件夹下各类型源文件task处理后放到一个dist文件夹中，开启gulp的watch功能。

--直接在src中开发即可。

--用微信开发者工具打开dist文件夹，作为微信项目，进行调试、上传等。

2.input双向绑定：绑定到属性值里{{}}记得加双引号，我总是忘记

<input type="text" value="{{name}}" placeholder="name" />

3.页面跳转：

事件跳转：调用wx的navigateTo

  //wxml
        <li data-url="{{item.to}}" bindtap="jumpTo">{{item.name}}</li>
  //js
  jumpTo: function(e) {
    wx.navigateTo({
      url: e.target.dataset.url
    });
  },

返回之前的页面：wx.navigateBack

重定向页面：wx.redirectTo

组件跳转：调用navigator组件，传入url

<navigator url="/pages/logs/logs?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

4.跳转后获取url参数：在wx页面js的onLoad参数获取

onLoad: function(options) {
    console.log(options);
  },

5.请求：wx.request

    wx.request({
      method: 'GET',
      url: 'http://www.vainus.xyz/wx?test=hahaha', 
      // data: {
      //   test:'hahaha'
      // },
      // header: {
      //   'content-type': 'application/json' // 默认值
      // },
      success: function(res) {
        console.log(res.data);
      }
    });

6.本地缓存：

wx.setStorage({
  key:"key",
  data:"value",
  success:fn1,
  fail:fn2,
  complete:fn3
})

wx.getStorage({
  key: 'key',
  success: function(res) {
  	console.log(res.data)
  } 
})

wx.removeStorage({
  key: 'key',
  success: function(res) {
    console.log(res.data)
  } 
})

7.目前觉得最常用还是这4个页面生命周期

onPageScroll

onPullDownRefresh

onReady

onLoad

8.js模块化：

module.exports=fn  //module
const xx = require('relative/path/to/module.js') //page

9.模板用法：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<template is="msgItem" data="{{...item}}"/> //is指定模板

10.冒泡事件列表

11.import(针对wxml) ，include暂时觉得不是很必要

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

12.wxs模块，每个.wxs或<wxs>内部作用域封闭，只能通过module.exports对外暴露出方法或变量

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>  //引用一个wxs模块的方法

13.组件使用：wx小程序自定义组件，在实现上就像一个简易page，开个component/colorFont文件夹：

//json
{
  "component": true
}

<!--wxml-->
<text class="content-color" bindtap="onTap">{{content}}</text>

/* .wxss */
.content-color{
  color:red;
}

Component({
  properties: {
    // 这里定义了content属性，属性值可以在组件使用时指定
    content: {
      type: String,
      value: 'default value',
      observer: function (newVal, oldVal) {return newVal } // 属性被改变时执行的函数（可选）
    }
  },
  data: {
    color: 'red'   // 这里是一些组件内部数据
  },
  methods: {
    // 自定义方法
    // 生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。
    customMethod: fn,
    onTap: fn
    }
  }
})