小程序基础知识-上

JS页面的生命周期

• 生命周期函数–监听页面加载
  onLoad: function (options) {
  },
• 生命周期函数–监听页面显示
  onShow: function () {
  },
• 生命周期函数–监听页面初次渲染完成
  onReady: function () {
  },
• 生命周期函数–监听页面隐藏
  onHide: function () {
  },
• 生命周期函数–监听页面卸载
  onUnload: function () {
  },

二、基础配置

pt 逻辑分辨率 与px 物理分辨率

pt逻辑分辨率和px物理分辨率的关系是 27寸屏幕 2k分辨率
pt 逻辑分辨率 屏幕尺寸有关，px 物理分辨率 像素点组成



小程序里 图片尺寸 物理分辨率*rpx（物理分辨率/逻辑分辨率）rpx小程序自动算好的

全局配置与页面配置

app.json决定页面层级
由app.json 里的pages 数组决定，首屏出现的页面是 pages数组里的第一项。

全局配置：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象

页面配置：每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
只能配置 window中的配置项，所以在页面配置中不用加“window”

注意：在json中写另外的代码 需要用 “ ， ”逗号隔开、
*
*

全局：

app.js
App({

• 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLaunch: function () {
  先执行
  },
• 当小程序启动，或从后台进入前台显示，会触发 onShow
  onShow: function (options) {
  后执行
  }
• 当小程序从前台进入后台，会触发 onHide
  onHide: function () {
  },
• 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function (msg) {
  }
  })

全局变量

接收

场景值

在APP.js的page里

例如：
1001 发现栏小程序主入口，「最近使用」列表（基础库2.2.4版本起包含「我的小程序」列表） /
1005 微信首页顶部搜索框的搜索结果页 查看
1006 发现栏小程序主入口搜索框的搜索结果页 查看
1007 单人聊天会话中的小程序消息卡片 查看
1008 群聊会话中的小程序消息卡片 查看

连接：https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.htm

三、基础组件

标题栏

wx.setNavigationBarTitle(Object object)
动态设置当前页面的标题

标题栏 页面加载loading状态

加载页面状态
wx.showNavigationBarLoading();

停止页面加载
wx.hideNavigationBarLoading();

交互界面：提示页面

wx.showToast({ 中 })
title:“提示消息”
duration：“提示时间” 默认1.5秒 最大10秒
icon:“显示图片 success是√ loading是加载中”

wx.showModal({})
title:“提示消息”
content:“提示内容”
showCancel:“是否显示取消按钮” 默认true
cancelText:“取消按钮的文字，最多 4 个字符” 默认取消
cancelColor:“取消按钮的文字颜色” 默认：#000000
confirmText:“确认按钮的文字，最多 4 个字符” 默认确定
confirmColor:“确认按钮的文字颜色” 默认：#576B95


success方法：
参数里自带res. 当res.confirm为true的时候，
if(res.confirm){ …表示用户点击确定按钮
… 方法体内，自行根据参数写逻辑代码
}

this关键字
this函数调用的上下环境
当this改变前，可以用var that=this。用that代替
success、complete下会改变

跨页面使用this数据、改写this数据
1.把this当初参数，传递进去。（也就是把this的引用路径传递进去）
2.跨页面内，根据传递进来的this，即可对原页面 进行获取数据、修改数据。


运算结果：

修改数据的两种方法：
https://www.cnblogs.com/Guhongying/p/10797824.html

表单组件

swich 开关组件


组件属性
checked：是否勾选 默认：false
type：勾选样式 默认：switch ，还有checkbox,勾选样式
color:颜色
bindchange：触发事件，填写触发函数事件

slider滑动组件


组件属性
min：最小值 默认：0
min：最大值 默认：100
step:每步长,取值必须大于 0，并且可被(max - min)整除
value:初始值
show-value：是否显示当前值 默认：false
selected-color：已选择的颜色
bindchange ：完成一次拖动后触发的事件，event.detail = {value}
bindchanging：拖动过程中触发的事件

input输入组件


组件属性

 <input type="类型" placeholder="输入框默认值" placeholder-class="输入框样式"
  bindfocus="触碰输入框触发事件" bindchange="无触碰输入框触发事件" />

回车键也会触发 bindchange事件

触发的事件内：
event.detail = {value: value}

获取输入文本的值：
onBindFocus:function(event){
------event.detail.value
},

radio单选组件


文本是给用户观看，value是给后端使用

组件属性
radio-group
bindchange：选中项发生改变时触发 change 事件

radio
value string radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked boolean false 当前是否选中
disabled boolean false 是否禁用
color string #09BB07 radio的颜色

checkbox复选组件



组件属性：
radio-group
bindchange：选中项发生改变时触发 change 事件

radio
value string radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked boolean false 当前是否选中
disabled boolean false 是否禁用
color string #09BB07 radio的颜色

表单提交
—获取表单内的所有组件的值
父类form组件 包裹表达组件
bindsubmit 携带 form 中的数据触发 submit 事件
bindreset 表单重置时会触发 reset 事件

由按钮buttom来发送事件，被父类form组件捕获事件

form遍历子类组件的值，是依靠子类的name
否则数据会读取空白

js页面，父类form的事件函数触发

输出结果：

登录、获取用户信息

unionID:用来识别 你的公众号和小程序的使用者 是否是同一个人

用户拒绝授权请求的时候，调用getUserInfo 不会再弹出授权窗口。需要清除授权数据

wx.getUserInfo() 不再主动弹出授权框，API更新于2018年5月12日

要在原有的基础上添加 ：open-type=“getUserInfo” 。

<button bindtap="login" open-type="getUserInfo" type="primary">授权登录</button>

示例：

wxml:

<button bindtap="login" type="primary" >登录</button>
<button bindtap="userMessage" open-type="getUserInfo" type="primary">获取用户信息</button>
<button bindtap="user" type="primary" >检测是否登录</button>

js:

Page({
  user: function(){
    wx.checkSession({
      success() {
        //session_key 未过期，并且在本生命周期一直有效
        console.log("已登陆")
      },
      fail() {
        // session_key 已经失效，需要重新执行登录流程
        console.log("未登陆")
        wx.login() //重新登录
      }
    })
  },
   login: function () {

    wx.login({
      success: function (res) {
        console.log("成功登陆")
        console.log(res)
      },
      fail: function (res) {
        console.log("登陆失败 ")
        console.log(res)
      }
    })
  },
  userMessage:function(){
    wx.getUserInfo({
      success: function (res) {
        withCredentials: true,
          console.log("获取信息成功 ")
        console.log(res);

      },
      fail: function (res) {
        console.log("获取信息失败 ")
        console.log(res)
      }
    })
  }
})

用户设置界面（权限）

wx.openSetting(Object object)
设置界面只会出现小程序已经向用户请求过的权限

wxml:
<button bindtap="onOpenSetting"  type="primary" >用户设置界面</button>
js:
onOpenSetting:function(){
    console.log("用户设置界面")
    
       wx.openSetting({
           success:(res)=>{
               console.log(res);
             console.log(res.authSetting)
           }
      })
  }

分享:
第一种分享：

wxml:
<button  open-type="share">分享</button>

第二种分享：

wxml:
<button bindtap="showshare" >分享</button>
<button bindtap="hideshare">取消分享</button>

js:
 showshare:function(){
    console.log("分享1")
    wx.showShareMenu()
  },
  hideshare: function () {
    console.log("取消分享1")
    wx.hideShareMenu()
  }
 

Swiper 滑动（轮播图）组件

swiper和swiper-item是一个容器
Swiper决定轮播图高宽
Swiper-item 里的image里也需要调成swiper里的高宽 才可以填满。

Swiper的高宽决定swiper-tiem的高宽，因为item自动充满Swiper

轮播图指示点：
indicator-dots 属于swiper组件里的
即可

自动切换图片： 即可

tab选项卡组件

注意：包含tab选项卡的页面 只能被wx.switchTab访问到，其他路由API则不行。

在app.json下设置：
{
 "tabBar":{
    "list":[
      {
        "pagePath":"pages/posts/posts",
        "text":"阅读"
      },
      {
        "pagePath":"pages/movies/movies",
        "text":"电影"
      }
    ]
  }
}

tabBar是选项卡

list集合是： Tabbar的项的数组，按照规范，至少要有2个Tabbar项
pagePath：是跳转的网页路径
iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
selectedIconPath：选中时的图片路径
当 position 为 top 时，不显示 icon。
text ：是Tabbar项的标题

borderStyle:–(与list同级)–tabbar 上边框的颜色， 仅支持 black / white
“color”: “未选择的文字颜色”,
“selectedColor”: “选中时的文字颜色”,

音乐播放器

播放：
wx.playBackgroundAudio({
dataUrl: ‘’,
title: ‘’,
coverImgUrl: ‘’
})
dataUrl--------string----是----音乐链接 目前支持的格式有 m4a, aac, mp3, wav
title-------------string----否----音乐标题
coverImgUrl–string----否----封面URL
停止播放：
wx.pauseBackgroundAudio();
终止播放：
wx.stopBackgroundAudio()

监听音乐：
监听音乐播放事件：
wx.onBackgroundAudioPlay(function （）{
逻辑代码
})
监听音乐停止播放事件
wx.onBackgroundAudioPause(function (){
console.log(“音乐暂停”)
that.onaudio(0) //that指代this，可访问同页面下的事件函数
})
注意：音乐播放暂停 不会立即触发事件，等该方法里剩下的代码运行完成，才会触发事情。
监听音乐播放完毕事情：
wx.onBackgroundAudioStop(function(){
逻辑代码
}

Map地图组件

地图以经纬度为中心点
组件属性：
longitude number 是 中心经度
latitude number 是 中心纬度
scale number 16 否 缩放级别，取值范围为3-20 越大越详细
markers Array. 否 标记点
polyline Array. 否 路线

markers-标记属性:
id ：标记点 id number 否 marker 点击事件回调会返回此 id。
（建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。）
latitude 纬度 number
longitude 经度 number
iconPath 显示的图标 string
width 标注图标宽度
height 标注图标高度

polyline-路线属性:
points 经纬度数组 array 是 [{latitude: 0, longitude: 0}，{latitude: 1, longitude: 1}]
color:颜色
width路线宽度
dottedLine 是否虚线 boolean 否 默认 false

示例：
wxml:
<map
id="myMap"
latitude="23.0999994"
longitude="113.324520"
markers="{{markers}}"
polyline="{{polyline}}"
bindmarkertap="markertap" 点击marker图片，触发事件
></map>

js:
data: {
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 创意园',
      iconPath: '/image/location.png'
    }],
    polyline:[{
      points:[{
        //第一个点
        latitude: 23.099994,
        longitude: 113.324520,
      },{
        //第二个点
          latitude: 23.21229,
          longitude: 113.324520,
      }],
      color:"#FF0000DD",
      width:2,
    }]
  },
    markertap(event) {
    //打开微信内部地图
     wx.openLocation({
       latitude: 23.21229,
       longitude: 113.324520,
     })
  },

选择用户收货地址

 <button type="primary" bindtap="chooseAddress">获取收货地址</button>
 
js:
   chooseAddress() {
    wx.chooseAddress({
      success: (res) => {
        console.log(res);
        this.setData({
          addressInfo: res
        })
      },
      fail: function(err) {
        console.log(err)
      }
    })
  }
 

真机里，弹出授权申明，填写资料 即可拥有数据。

微信小图标icon

<icon type="String"></icon>

type—string—有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

siz-----number/string icon的大小

color-----string icon的颜色同css的color

图片缩放与裁剪

mode
示例：

<image  src="" mode="aspectFill" />

类型：string 默认：scaleToFill
图片裁剪、缩放的模式

注意：要给图片定一个高宽，也就是定一个裁剪区域
如果不指定高宽，会自动让图片宽度保持320px。

缩放模式

scaleToFill
缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit
缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

裁剪模式：
没有高宽值时默认值 320
当图片比屏幕大，才有裁剪效果，否则只是等比例显示图片的某个位置
top
裁剪模式，不缩放图片，只显示图片的顶部区域

bottom right
裁剪模式，不缩放图片，只显示图片的右下边区域

大图浏览

wxml:
<view catchtap="包含大图显示的xx方法">需要触发大图显示</view>
js:
xx:function(event){
   wx.previewImage({
         current:src,//当前显示图片的http链接
         urls:[src]//需要浏览的图片http链接列表
       })
}

大图显示：


变成：

四、JS功能基础

小程序–数据绑定

在js代码里，（只能）data代码块中的数据，可被应用在wxml中
如：

注意：使用双花括号

使用js中的onLoad: function (options){} 接受后端的数据，再使用this.setData(内容)传递给data对象中。

如果数据机构中不止一层，有两层甚至三层

wxml中数据绑定则：
*
*
数据绑定的扩展用法：
1.在js中，非空字符串 被判定为true。

autoplay自动播放，并不会停止，只有加上{ { false } },才会生效。因为不是布尔值，非空即为true。

2.花括号内会进行数据运算。

运行结果：

运算结果：

条件渲染与列表渲染

条件渲染：wx：if 标签是否显示
记得数据绑定 和双引号 “{{ true 或者 false }}”
例如：《text wx : if="{{true}}">内容消失</text》
网页html里找不到该标签

列表渲染：wx：for 列表循环多少次
《view wx : for="{{集合类型}}"> 。。。内容。。。</view》

集合内指定：wx : for-item=“any” 默认item
《view wx : for="{{集合类型}} " wx : for-item=“any” > 。。。内容。。。</view》

注意：挂在标签后面的属性要加引号和花括号（绑定数据情况下）

setData（js对象），括号内不能是直接是数组，需要转换为js对象

括号内简化代码为：{posts_content} 等于{posts_content : posts_content }
ES6语句。

小程序的事件机制

首先小程序会产生用户交互事件，当我们捕捉到这个事件，需要去处理这个事件
产生事件 —> 捕捉事件 会触发 回调函数 —> 在回调函数里处理事件

产生事件 —捕捉事件—回调函数 —处理事件

产生事件：用户自行触发
捕捉事件：监听事件，需要在前加 bind：事件或者 bindtap
回调函数：触发事件=“函数名”
处理事件：在js里写对应的函数名：function(){}

事件：tap 手指触摸后马上离开

跳转页面：
wx.navigateTo（{
url:‘代码页面路径’
}） 执行onHide 页面隐藏 ，所以有返回键
注意：跳不了包含选项卡的页面

wx.redirectTo（{
url:‘代码页面路径’
}） 执行onUnlond 页面卸载 ，所以无返回键
注意：跳不了包含选项卡的页面

wx.switchTab({
url:“路径”
})
注意：可跳转到包含tab选项卡的页面，其他则不行

页面跳转，数据传递以及接收

传递：
url:路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
例如：id传递数据名,pid 数据

接收：函数参数给的options里已经包含了传递的id值，可单独取出

捕捉器 bind（冒泡） 与 catch（非冒泡） 的区别
bind ：捕捉到事件，不仅触发自身，还会向上层级报到该事件
catch：捕捉到事件，仅触发自身，不会上报

数据模块传递：exports传递方法与require加载方法

数据抛出：module.exports={ 对象名1 :赋值1（ 数组变量名 ）} //可延伸，逗号隔
数据加载：var 临时变量名=require(“文件路径.js”)，在onLoad中this.setData（{临时变量名}）
require 貌似需要相对定位

传递例子:


加载例子：

在page（{中}）

注意：require接收的是代码文件的路径，在转移数据时候，需要加载文件里的js对象

注意!!：因为是把posts-key对象加载在data中，使用数据绑定的时候，如果有 wx:for-item="item"代指情况就用item.数据名，没有则使用posts-key.数据名.

数据抛出以后，任何人都可以通过require方法引入数据，再去使用
*
*
*
列如：
module.exports 把方法抛出

require方法引进

不同文件下的，方法调用 以及文件传值回来

template模板化

创造一个文件，里面包含html和js

创建模板样式:

wxml:
<template name=“模板名”>  html的内容   </template> 
css:
直接写就成

使用模板：先引入文件

wxml:
`<import src="代码路径" />` 
<template is="备注名" data="{{data}}" /> //data用于传递数据
css：
@import "代码路径";//相当于把代码复制过来

详细示例：
创建文件

创建模板
wxml模板：

wxss模板：代码直接copy进去

引用包含模板的代码：
wxml引用模板

wxss引用模板

使用模板：

注意：template模块，加载完后，不会显示在网页的html里（不是代码的html）
注意：多层嵌套template模板的时候，不仅html需要每个文件需要衔接上，css也需要，否则style样式会传不到,出现断层现象。data={{数据传递也是}},
data="{{…展开数据}}"

自我思考：
我认为template模板,在套用html或者css的时候，意味着把代码复制到，套用模板的代码文件里、

自定义属性

data后加若干个 横杆 ---- 或者 字母 ，都属于自定义属性
data-自定义属性名
注意：连字符第一个字母会被大写，其他小写
v1.02.1911180版本疑似无，小写也可

例如：名为postid的自定义属性

在js中的onTap函数方法中

event 是方法参数里给的的事件对象
currentTarget 是当前事件捕获的组件
target是当前点击的组件
dataset 是所有属性的集合
postid 就是我们前文自己设定的值

缓存Storage的基本用法

分Sync同步缓存 和异步缓存
缓存的上限最大不能超过10mb

设置缓存：wx.setStorageSync(“缓存名”，值 )
取得缓存：wx.getStorageSync(“缓存名”)
清除缓存：wx.removeStorageSync(“缓存名”)
清全缓存：wx.clearStorageSync();

设置缓存：

取得缓存：

清除缓存：

网络获取数据：调用API

网络请求
wx.request({
url: ‘’, //API地址
data:{} ,//根据method执行相关方法
method:“GET” //
header:{
“Content-Type”:“application/json”
},
successs:function(res){
//调用API成功后，res是API返回来的数据
},
fail:function(error){
//断网情况执行
}
})
GET：查询
POST:提交
PUT:提交
DELETE:删除

api报错：
400 参数错误
404 找不到资源
500 服务器未知错误
502 网站服务器通信出错

访问restful的api，wx.request里一定要设置header
header 内需要设“Content-Type”:“json”,
application/json是restful的api

动态化获取数据

因为要执行多个同一方法，传递不同数据，最后取得不同数据结果，防止后面的数据覆盖掉前面的数据

原理：给对象的属性赋值。

回调函数

！！平面解析图：

在该方法中，把回调方法当成参数传递进来，该方法请求成功，则调用回调方法。
适用于异步处理

方法抛出：

接收方法：

调用方法：并且传递了回调函数进去

调用成功后触发success方法：触发回调函数

回调函数：处理相应的逻辑代码

可滚动视图

滚动条设置：
https://www.jianshu.com/p/f3b9a92dab79

当前页面的json中:
{
“enablePullDownRefresh”: true, //上拉刷新
“onReachBottomDistance”:600 //下拉触底的高度
}
js中：
onPullDownRefresh: function () {
console.log(“下拉页面刷新”)
},

页面上拉触底事件的处理函数
onReachBottom: function () {
console.log(“上拉页面加载”)
},

使用scroll-view组件

<scroll-view  class="grid-container" scroll-y="true" scroll-x="false" >

下拉加载
添加一个组件属性

<scroll-view  class="grid-container" scroll-y="true" scroll-x="false"  
bindscrolltolower="触发的事件">

上拉刷新：组件内冲突，不支持

属性---------------------------------------------- 默认值 -必填

scroll-x boolean---------------------------------false 否 允许横向滚动
scroll-y boolean---------------------------------false 否 允许纵向滚动
bindscrolltoupper ------------- 触发事件方法-------否 滚动到顶部/左边时触发
bindscrolltolower--------------触发事件方法--------否 滚动到底部/右边时触发
enable-back-to-top---------- boolean--------false–否 iOS点击顶部状态栏 滚动条返回顶部，只支持竖向

bindscrolltolower：
滚动条触底 ，css需要设高度

上拉-加载数据,以及数据累计

设置requestUrl空值用于储存新的url
totalCount是新url数据开始加载的初始位置
isEmpty：用了判断是否第一次加载

1.

滚动条下滑触底 ，触发的方法


无关，只是为了更好的理解

数据处理-分配的过程

2

下拉-刷新数据

新版本130400之后，下拉刷新和scroll-view不可以同时使用。导致onPullDownRefresh事件函数无法执行的原因是页面里包含一个scroll-view组件

在json文件中配置下拉刷新数据

触发方法

停止方法

ES6-封装方法

使用Module和Class提取封装一个movie对象
js:
// pages/movies/movie-detail/movie-detail.js

import{Movie} from "class/Movie.js";//引入封装Movie方法
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    movie:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var id=options.id;
    console.log(id);
    var url = app.globalData.doubanBase+"/v2/movie/subject/" + id+"?
    apikey=0df993c66c0c636e29ecbb5344252a4a"
    var that=this;//下面方法里的this变了
    var movie=new Movie(url);//movie实例化，并且传url给构造函数
    movie.getMovieData(//由于是异步方法，用回调函数获取数据
    
      function(movie){//第一层回调函数，参数movie就是Movie类里的电影数据
         that.setData({ movie: movie})    
       }
       
    )
    //utils.http(url, this.processDoubanData)以引入Movie类

  },
   
  //  查看图片
  viewMoviePostImg:function(event){
       var src=event.currentTarget.dataset.src;
       wx.previewImage({
         current:src,//当前显示图片的http链接
         urls:[src]//需要浏览的图片http链接列表
       })
  },

})

封装好的js：
var utils = require('../../../../utils/utils.js')//引入公共方法（模块）
class Movie{//Movie类
  constructor(url){//构造函数
    //this指的Movie的实例化
    this.url=url;//--1.获得url
  }
   //class里的方法不用function
   getMovieData(cb){
     this.cb=cb;
     //--2.API调用成功，第二层回调函数执行，把这里的this通过bind方法绑定到调用方法里
     utils.http(this.url, this.processDoubanData.bind(this));
   }

  processDoubanData(data){
    var director = {
      avatar: "",
      name: "",
      id: ""
    }
    if (data.directors[0] != null) {
      if (data.directors[0].avatars != null) {
        director.avatar = data.directors[0].avatars.large
      }
      director.name = data.directors[0].name;
      director.id = data.directors[0].id;
    }
    //回调函数数据处理完毕，得到数据
    var movie = {
      //如果images不为空，则返回images 否则返回空值字符串
      movieImg: data.images ? data.images.large : "",
      country: data.countries[0],
      title: data.title,
      originalTitle: data.original_title,
      wishCount: data.wish_count,
      commentCount: data.comments_count,
      year: data.year,
      generes: data.genres.join("、"),
      casts: utils.convertToCastString(data.casts),
      castsInfo: utils.convertToCastInfos(data.casts),

      stars: utils.converToStarsArray(data.rating.stars),

      score: data.rating.average,
      director: director,
      summary: data.summary
    }
    this.cb(movie)//数据传递给第一层回调函数
  }
}
//引出封装好的Movie类
export{Movie}

ES6-箭头函数

  onLoad: function (options) {
    var id=options.id;
    console.log(id);
    var url = app.globalData.doubanBase+"/v2/movie/subject/" + id+"?apikey=0df993c66c0c636e29ecbb5344252a4a"
    var movie=new Movie(url);//movie实例化，并且传url给构造函数
    movie.getMovieData(
      (movie) =>{//箭头函数里的this，是movie当前定义函数的this的环境，而不是调用方环境
        this.setData({ movie: movie })
      }
    )
    }

l

判断

以下都是判断成功的案例

数组循环：

注意：

1：判断条件 非空即为true 空即为false ,语句运行成功或者失败不会返值true/false

1.1
.挂在标签后面的属性要加引号和花括号（绑定数据情况下）

1.2:js内函数调用 this.函数名()，有参传参 无参就算

1.3 js内成员属性共享，this.data.数据名=数据，使用时：this.data.数据名即可

2.在json中写另外的代码 需要用 “ ， ”逗号隔开

3.就近原则
App.wxss上的效果（初始效果） 可被welcome.css 覆盖

4.小程序 var a 是临时变量

5.按住alt+shift+f 可以格式化代码样式

6.相对路径：从代码文件夹当前路径开始
6.绝对路径：从根目录下开始 例如：/a/b/c…

7.快速搜索文件 ctrl+p

8.调用page出错 某个文件的js没有配置好，起码：page({ })
或者 json 没配置好 起码：{ }

9.app.json 报错还有一个原因：不只是不能没有注解，只要有 （string number null true false） 以外的东西，都会报错！！！

网易云mp3网页路径方法：

网易云MP3链接
http://music.163.com/song/media/outer/url?id=1343152831.mp3
http://music.163.com/song/media/outer/url?id=.mp3
id值填写网易云单曲页面链接的尾数：

你一定会成为你想要成为的人 id=1414783972
http://music.163.com/song/media/outer/url?id=524003508.mp3

豆瓣开发者api

不能使用了需要在后面加上参数appkey

以网上查询还可以用的appkey：0df993c66c0c636e29ecbb5344252a4a为例最新接口如下

1、获取正在热映的电影：http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a

2、获取电影Top250：http://api.douban.com/v2/movie/top250?apikey=0df993c66c0c636e29ecbb5344252a4a

3、获取即将上映电影：http://api.douban.com/v2/movie/coming_soon?apikey=0df993c66c0c636e29ecbb5344252a4a

4、获取电影详情：http://api.douban.com/v2/movie/subject/${id}?apikey=0df993c66c0c636e29ecbb5344252a4a

以《你的名字》为例，上豆瓣电影搜索“你的名字”，点击进去，跳转至https://movie.douban.com/subject/26683290/ 页面 ，26683290即为《你的名字》id,所以搜索《你的名字》api为：http://api.douban.com/v2/movie/subject/26683290?apikey=0df993c66c0c636e29ecbb5344252a4a

json字符串在线格式化：http://www.bejson.com/