小程序学习记录

小工具：http://www.bejson.com
API测试工具:postman
--------------------------------------------------------------
1.系统顶级文件
app.js	app.json  app.wxss
project.config.json	//编辑器配置文件
--------------------------------------------------------------------------------
单位  rpx	类似rem		设计时以IPONE6为视觉设计稿    1px = 2rpx
使用  flex布局
--------------------------------------------------------------------------------
小程序不存在DOM节点***
------------------------
this.setData({data});//一般用这种写法ES6; 将data拷贝到data函数中传送到前台	非常重要***
注意set过去的数据一定要加""
this.data.name	//后台设置值，但是前台不受影响					非常重要***
-------------------------
autoplay="{{true}}"; 带双引号的false与true必须带双括号,因为这个是一个字符串,有则为真
-----------------------
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

在框架中，使用 <view wx:if="{{condition}}"></view> 来判断是否需要渲染该代码块：
或者使用<view hide="{{condition}}"></view>
---------------------------------
<block wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"></block>
---------------------------------
链接跳转（路由）:
<view bindtap='onTap'></view>	//绑定一个点击事件 bind+tap
page({
 
  next: function(e){
    console.log('点击了');
    wx.navigateTo({
      url: '../posts/posts'   //进入posts/posts.wxml
    })
  },

})
-----------------------------------
冒泡与非冒泡方式
bind:冒泡绑定事件		bindtap
catch:非冒泡绑定事件		catchtap

<view bindtap="s1">
  <view bindtap="s2"></view>
</view>
---------------------------------
alt+shift+f 快速格式化
---------------------------------
第三方js模块必须写出口才能被引入
如想将data/data.js 引入到 index.js中去

data.js写:
var postList = {
  status: '200',
  msg: '成功',
  data: [{
    name: '王二',
    age: '30'
  },
  {
    name: '张三',
    age: '15'
  }
  ]
}

module.exports = {
  postList: postList
}

index.js写
var postsData = require('../../data/data.js')  //只能使用相对路径
this.setData({
   userInfoKey: postsData.postList
});
-----------------------------------------------------------------
template模板的使用(import,include)  见框架引入
import:
head.wxml中
<template name="head">		//加模板名
  <view class='title'>
    <image src='/images/1.jpg'></image>
    <text>{{idx}}-{{item.name}}</text>
  </view>
  <view class='box-title'>
    <text>{{item.age}}</text>
  </view>
  <view class='list-nr w100'>
    {{item.name}}
  </view>
</template>
page.wxml中
@import 'public/public.wxss';	 //引入css
<import src="base/head.wxml" />	 //引入模板
<view class='wz' wx:for="{{userInfoKey.data}}" wx:for-index="idx" wx:for-item="item" wx:key="1">
  <template is="head" data="{{item}}" />	//传值data到模板文件中去
</view>
--------------------------------
<include src="base/head.wxml" />
-------------------------------------------------------------------
data-name="{{}}"	//数据绑定常用于绑定ID已便传值

1.列表页绑定data-id
<view class='wz' wx:for="{{userInfoKey.data}}" wx:for-index="idx" wx:for-item="item" wx:key="1">
  <view catchtap='goarticle' data-id='{{item.id}}'>
    <template is="head" data="{{item}}" />
  </view>
</view>

2.列表JS点击传值	//不懂怎么写就直接打印e
goarticle: function(e){
    var s = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../article/article?id='+s
    })
}

3.文章页接受ID	       //文章页初始化时会将值带入e,不懂的话就打印e有惊喜
onLoad: function (e) {
  console.log(e)
}

4.查询数据库->setDate到date中->前台调用
----------------------------------------------
本地缓存（缓存上限为10M）
wx.setStorage('key','value');			设置获取
wx.getStorage('key',success:function(){})	获取
wx.removeStorage({				清除
  key: '',
  success: function(res) {},
})
wx.clearStorage();				清除所有
-----------------------------------------------
交互
wx.showToast()  	//JS的alter
wx.showModal()		//JS的config
wx.showLoading()	//等待
wx.showActionSheet()
------------------------------------------------
经典图片切换
后台:
musicplay: function(even) {
var isPlayMusic = this.data.isPlayMusic;
console.log(isPlayMusic);
if (isPlayMusic) {
  wx.pauseBackgroundAudio();
  this.setData({
    isPlayMusic: false
  });
} else {
  wx.playBackgroundAudio({
    dataUrl: 'http://www.yunmaoo.com/s1.mp3',
    title: '爱你一万年',
    coverImgUrl: '../../images/s1.mp3'
  });
  this.setData({
    isPlayMusic: true
  });
}
},
前台:
<view class='ss' bindtap='musicplay'>
  <image src='{{isPlayMusic ? "../../images/1.jpg" : "../../images/1.png"}}'></image>
</view>
-------------------------------------------------------------------------------------
wx.playBackgroundAudio		//小程序音乐播放,需远程流媒体,本地不行
var that = this;
var backaudio = wx.getBackgroundAudioManager();		//获取小程序音乐总控所有开关
backaudio.onPause(function() {
  that.setData({
    isPlayMusic: false
  });
});
-------------------------------------------------------------------------------------
app.js中定义的值为全局变量
其他页面获取全局变量页面顶部先要使用:
var app = getApp();	//外部引入全局变量
app.xx.xx = true	//外部改变全局变量值
---------------------------------------------------------
底部有TAB栏目必须使用路由必须使用wx.switchTab而不能使用wx.redirectTo和wx.navigateTo  ***
-----------------------------------------------------------
wx.setNavigationBarTitle		//动态改变顶部标题，点进文章页很有用
------------------------------------------------------------
下程序上拉下滑加载思路: *****
1.后台接口思路    	m = (page-1)*n      select * from table where 1 limit m,n	//m:从第几条开始取	n:一次取多少条		page:当前在第几页  前端只需要传值page即可

2.前端思路			
第一次加载将值保存到data中的movies,然后改变isEmpty的值为false,而且page加1,加载时判断isEmpty是否为false,如果为false,则说明不是第一次加载,将moveis的值与本次请求的值合并输入到前端,输出的同时将
整个值再次保存到movies中去,page再次加1,合并的方法用concat非常nice。

Page({
  data: {
    movies: "",
    page: 1,
    isEmpty: true,
    url: ""
  },

  onLoad: function(options) {
    var lname = options.lname;
    if (lname == 1) {
      var url = 'https://v.juhe.cn/movie/movies.today?key=e9d86d49a817dfd24755c3e840a84cee&cityid=5';
      wx.setNavigationBarTitle({
        title: '即将上映'
      })
    } else if (lname == 2) {
      var url = 'https://v.juhe.cn/movie/movies.today?key=e9d86d49a817dfd24755c3e840a84cee&cityid=5';
      wx.setNavigationBarTitle({
        title: 'TOP200'
      })
    }
    this.data.url = url;
    this.http_curl(url);
  },

  http_curl: function(url) {
    var that = this;
    wx.request({
      url: url,
      success(res) {
        if (res.statusCode == 200) {
          var datalist = {};                 //创建页面大容器
          that.data.page += 1;               //页面递增1
          if (!that.data.isEmpty) {          //不是第一次加载
            datalist = that.data.movies.concat(res.data.result);   //合并值
            that.data.movies = datalist          //将合并后的值传入data中保存
          } else {				 //第一次加载
            datalist = res.data.result;          //将值装入大容器
            that.data.movies = res.data.result;  //将值传入data中保存
            that.data.isEmpty = false;           //改变empty的属性
          }
          that.setData({
            datalist
          });
        }
      },
      fail() {
        wx.showToast({
          title: '接口调用失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    wx.showLoading({            //调用加载UI
      title: '加载中',
    })
    var that = this;
    var nexturl = that.data.url;
    //var nexturl = that.data.url + "?page=" + that.data.page;  //由于聚合数据不支持分页调用每次调用全部数据
    wx.stopPullDownRefresh({
      success(res) {
        wx.hideLoading();       //关闭加载UI
        that.http_curl(nexturl);
      },
      fail() {
        wx.showToast({
          title: '数据获取失败',
          icon: 'none',
          duration: 2000
        })
      }
    })
  },

})
------------------------------------------------------------------------------------------
小程序配置下拉刷新,到需要的页面json中去配置而不是在app.json中配置,否则会影响其他页面
下拉刷新思路:直接取第一次的头二十条给前端
{
  "enablePullDownRefresh":true
}
-----
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
    var pullurl = this.data.url;
    this.data.isEmpty = true;
    this.data.movies = "";
    this.http_curl(pullurl);
},
-----
backgroundColor:是指下拉刷新的颜色
--------------------------------------------------------------------------------------
搜索页思路
利用input中bindfocus="focus"聚焦隐藏当前页面,显示搜索页面
利用input中bindblur="blur"  失焦显示当前页面,隐藏搜索页面
利用bindconfirm="confirms"  回车直接搜索页面
focus: function(e) {
    this.setData({
      'change': true
    })
},
blur: function(e) {
    this.setData({
      'change': false
    })
},
confirms: function(e) {
    console.log(e);
    http_url(url);
},

<button wx:if="{{change}}" class='btns' form-type="submit">
    <icon type="search" size="18" />
</button>
------------------------------------------------------------------------------
MAP的使用方法（一般都是直接使用百度地图接口,原生的没什么卵用）:
markers:定位点
------------------------------------------------------------------------------
选择收货地址(前台点击呼出微信自带收货地址页面供用户选择):
choseaddress:function(){
wx.chooseAddress({
  success (res) {
    console.log(res.userName)
    console.log(res.postalCode)
    console.log(res.provinceName)
    console.log(res.cityName)
    console.log(res.countyName)
    console.log(res.detailInfo)
    console.log(res.nationalCode)
    console.log(res.telNumber)
  }
})
}
-------------------------------------------------------------------------------
小程序登录类似微信公众号登录:
wx.login获取code->服务器带code等信息请求微信服务器获得openid等数据,将session_key经过jwt方式加密方式返回给前端->前端带jwt参数访问小程序
-------------------------------------------------------------------------------
小程序，头像等信息，直接由前端发送给后台
改版之后必须要用户点击才能获取用户信息

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
-------------------------------------------------------------------------------------------------------------
场景值,获取小程序来源方式
判断用户进入小程序的方式(如点餐扫码)
-------------------------------------------------------------------------------