微信程序开发之小程序入门2

01.小程序框架组成

在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面
   1.逻辑层
     1.注册小程序
     2.注册页面
     3.页面生命周期
     4.页面路由
     5.模块化
     6.API
   2.视图层
     1.wxml
     2.wxss
     3.wxs
       wxs是微信小程序自身的脚本语言，用来过滤和计算。wxs可以通过文件可模块标签来定义，文件需要.wxs后缀文件
       wxs是专门用于wxml页面的，如果你有在页面中使用js脚本的需求可以使用，但是wxs是不能被其它js文件引用的
       实际开发应该根据情况，选择使用js或wxs，但本人的绝大部分开发都是用js中完成的

元素定义

var是全局变量
let是定义布局变量
const是定义常量

定义生命周期

小程序生命周期

app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
    onShow (options) {
  console.log("开始显示")
},
onHide () {
  console.log("隐藏")
},
onError (msg) {
  console.log(msg)
},
  globalData: {
    userInfo: null
  }
})

页面生命周期

// index.js
// 获取应用实例
const app = getApp()

// var是全局变量
// let是定义布局变量
// const是定义常量
for(let i=0;i<10;i++){

}

Page({
  data: {
    motto: '嗨嗨嗨',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  onLoad: function(options) {
    // 页面创建时执行
    console.log("onLoad")
  },
  onShow: function() {
    // 页面出现在前台时执行
    console.log("onShow")
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
    console.log("onReady")
  },
  onHide: function() {
    // 页面从前台变为后台时执行
    console.log("onHide")
  },
  onUnload: function() {
    // 页面销毁时执行
    console.log("onUnload")
  },



})

  生命周期图：

 页面路由

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

开发者可以使用  getCurrentPages() 函数获取当前页面栈。

 

路由方式

对于路由的触发方式以及页面生命周期函数如下：

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/>	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/>	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 使用组件<navigator open-type="navigateBack"> 用户按左上角返回按钮	onUnload	onShow
Tab 切换	调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab		各种情况请参考下表
重启动	调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/>	onUnload	onLoad, onShow

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

当前页面	路由后页面	触发的生命周期（按顺序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打开）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（从转发进入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（从转发进入）	B	D.onUnload(), B.onLoad(), B.onShow()

注意事项

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

index.wxml

<!--index.wxml-->
<view class="container">
  <!--  view就相当于div-->
  <!--  text是行内形式的view-->
  <text>{{motto}}</text>
  <!--  &lt;!&ndash;  页面返回&ndash;&gt;-->
  <!--  <navigator url="/pages/logs/logs" open-type="navigate">点我去首页</navigator>-->
  <!--  页面重定向-->
  <navigator url="/pages/logs/logs" open-type="redirect">点我去首页</navigator>

</view>

列表渲染

在index.js加上

在index.wxml文件中遍历：在map中，i就是键，e就是值，wx:key="*this"是标识，不加上会报错

<!--  e遍历，i下标-->
  <view wx:for="{{cities}}" wx:for-item="e" wx:for-index="i" wx:key="*this">
    {{e}}-{{i}}
  </view>

 

 image标签

新增个目录放图片

<image src="/images/a.jpg"></image>

 movable-area与movable-view

在index.wxml加上

 <movable-area style="width:300px;height:300px;background:yellow">
    <movable-view direction="all">
      <image src="/images/a.jpg" style="width:100px;height:100px"></image>
    </movable-view>
  </movable-area>