全栈开发工程师微信小程序-下

{

  "pages": ["pages/index/index"]

}

<text>Hello World</text>

Page({})

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

<!--pages/wxml/index.wxml-->
<text>当前时间：{{time}}</text>

// pages/wxml/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    time: (new Date()).toString()
  },
})

<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text>


<!-- 错误的写法  -->
<text data-test={{test}}> hello world </text >

<!--
{ a: 1,  b: 2, c: 3 }
-->


<view> {{a + b}} + {{c}} + d </view>


<!-- 输出 3 + 3 + d -->

<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

<!-- array 是一个数组 -->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

<!-- 对应的脚本文件
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
-->

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

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

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


<template is="msgItem" data="{{...item}}"/>

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

<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>

<template name="B">
  <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>

<template is="A"/>  <!-- 这里将会触发一个警告，因为 b 中并没有定义模板 A -->

<template is="B"/>

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

<view> body </view>

<include src="footer.wxml"/>

data-*  Any 自定义属性   组件上触发的事件时，会发送给事件处理函数
bind*/catch*    EventHandler    组件的事件

@import url('./test_0.css')

<!--index.wxml-->

<!--可动态变化的内联样式-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

// moduleA.js
module.exports = function( value ){
  return value * 2;
}

// 在B.js中引用模块A
var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

// a.js
// 获取全局变量
var global = getApp()
global.globalValue = 'globalValue'

// b.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue

// a.js
// 局部变量
var localValue = 'a'

// 获取 global 变量
var app = getApp()

// 修改 global 变量
app.globalData++  // 执行后 globalData 数值为 2

// b.js
// 定义另外的局部变量，并不会影响 a.js 中文件变量
var localValue = 'b'

// 如果先执行了 a.js 这里的输出应该是 2
console.log(getApp().globalData)

<view>{{ msg }}</view>

Page({
  onLoad: function () {
    this.setData({ msg: 'Hello World' })
  }
})

App({
  onLaunch: function (options) {
    console.log("app.js ---onLaunch---" + JSON.stringify(options));
  },
  onShow:function(){
    console.log("app.js ---onShow---");
  },
  onHide:function(){
    console.log("app.js ---onHide---");
  },
  onError: function (msg){
    console.log("app.js ---onError---" + msg);
  },
  globalData: {
    userInfo: null
  }
})

Page({
  onLoad: function (options) {
    console.log("page ---onLoad---");
  },
  onReady: function () {
    console.log("page ---onReady---");
  },
  onShow: function () {
    console.log("page ---onShow---");
  },
  onHide: function () {
    console.log("page ---onHide---");
  },
  onUnload: function () {
    console.log("page ---onUnload---");
  }
})

初始化 小程序打开的第一个页面     onLoad, onShow
打开新页面 调用    API wx.navigateTo   onHide  onLoad, onShow
页面重定向 调用    API wx.redirectTo   onUnload    onLoad, onShow
页面返回 调用 API wx.navigateBack onUnload    onShow
Tab 切换 调用 API wx.switchTab  请参考表3-6 请参考表3-6
重启动 调用 API wx.reLaunch  onUnload    onLoad, onShow

wx.request({
url: 'test.php',
data: {},
header: { 'content-type': 'application/json' },
success: function(res) {
 // 收到https服务成功后返回
 console.log(res.data)
},
fail: function() {
 // 发生网络错误等情况触发
},
complete: function() {
 // 成功或者失败后触发
}
})

<!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

// page.js
   Page({
  tapName: function(event) {
    console.log(event)
  }
})

touchstart  手指触摸动作开始
touchmove   手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend    手指触摸动作结束
tap 手指触摸后马上离开
longpress   手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend   会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart  会在一个 WXSS animation 动画开始时触发
animationiteration  会在一个 WXSS animation 一次迭代结束时触发
animationend    会在一个 WXSS animation 动画完成时触发

type    String  事件类型
timeStamp   Integer 页面打开到触发事件所经过的毫秒数
target  Object  触发事件的组件的一些属性值集合
currentTarget   Object  当前组件的一些属性值集合
detail  Object  额外的信息
touches Array   触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches  Array   触摸事件，当前变化的触摸点信息的数组

Page({

  onLoad: function() {

    var that = this

    wx.request({

      url: 'https://test.com/getproductlist',

      success: function (res) {

        if (res.statusCode === 200) {

          that.setData({

            list: res.data.list

          })

        }

      }

    })

  }

})

Page({

  onLoad: function() {

    var that = this

    var list =wx.getStorageSync("list")



    if (list) { // 本地如果有缓存列表，提前渲染

      that.setData({

        list: list

      })

    }

    wx.request({

      url: 'https://test.com/getproductlist',

      success: function (res) {

        if (res.statusCode === 200) {

          list = res.data.list

          that.setData({ // 再次渲染列表

            list: list

          })

          wx.setStorageSync("list",list) // 覆盖缓存数据

        }

      }

    })

  }

})

//page.js

var app = getApp()

Page({

  onLoad: function() {

    // 调用wx.login获取微信登录凭证

    wx.login({

      success: function(res) {

        // 拿到微信登录凭证之后去自己服务器换取自己的登录凭证

        wx.request({

          url: 'https://test.com/login',

          data: { code: res.code },

          success: function(res) {

            var data = res.data

            // 把 SessionId 和过期时间放在内存中的全局对象和本地缓存里边

            app.globalData.sessionId =data.sessionId

            wx.setStorageSync('SESSIONID',data.sessionId)



            // 假设登录态保持1天

            var expiredTime = +new Date() +1*24*60*60*1000

            app.globalData.expiredTime =expiredTime

            wx.setStorageSync('EXPIREDTIME',expiredTime)

          }

        })

      }

    })

  }

})

//app.js

App({

  onLaunch: function(options) {

    var sessionId =wx.getStorageSync('SESSIONID')

    var expiredTime =wx.getStorageSync('EXPIREDTIME')

    var now = +new Date()



    if (now - expiredTime <=1*24*60*60*1000) {

      this.globalData.sessionId = sessionId

      this.globalData.expiredTime = expiredTime

    }

  },

  globalData: {

    sessionId: null,

    expiredTime: 0

  }

})

//page.js

Page({

  // 点击“扫码订餐”的按钮，触发tapScan回调

  tapScan: function() {

    // 调用wx.login获取微信登录凭证

    wx.scanCode({

      success: function(res) {

        var num = res.result // 获取到的num就是餐桌的编号

      }

    })

  }

})

//page.js

Page({

  // 点击“预览文档”的按钮，触发tap回调

  tap: function() {

    wx.getNetworkType({

      success: function(res) {

        // networkType字段的有效值：

        // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)

        if (res.networkType == 'wifi') {

          // 从网络上下载pdf文档

          wx.downloadFile({

            url:'http://test.com/somefile.pdf',

            success: function (res) {

              // 下载成功之后进行预览文档

              wx.openDocument({

                filePath: res.tempFilePath

              })

            }

          })

        } else {

          wx.showToast({ title: '当前为非Wifi环境' })

        }

      }

    })

  }

})