小程序基础

小程序基础

目录结构

程序主体

• app.js
• app.json 程序配置
• app.wxss 公共样式

页面

• index.js
• index.json 页面配置
• index.wxml 页面结构
• index.wxss 页面样式
  其中，js和wxml必须存在

配置

程序配置 -->app.json

• pages 页面路径
• window 页面的窗口表现
• tabBar 底部tab切换
• network Timeout 网络超时配置
• debug 是否开启调试

页面配置

• window 页面的窗口表现

注册（js文件中）

注册程序

一次,App({}),会得到一个程序的实例，可以被其他页面访问

注册页面

每个页面都需要,Page({})

程序生命周期

App

• onLaunch 程序启动时执行
• onShow 切换到小程序时执行
• onHide 切换到后台时执行

Page

• onLoad 页面加载时执行（只一次）
• onReady 初始化时完成/第一次渲染完成之后（只一次）
• onShow 页面显示时执行
• onHide 页面隐藏时执行
• onUnload 页面卸载时执行（只一次）

• tab切换是涉及隐藏和显示
• NavigatorTo load 之前的页面hide
• NavigatorBack Unload 之前的页面show

数据渲染

//js
let arr1 = ['john','jim','jerry','siee']
let arr2 = [{id:Math.random(),name:'tom'},{id:Math.random(),name:'jerry'},{id:Math.random(),name:'mary'}
Page({
  data: {
    name:"Siee",
    people:{
      n1:111,
      n2:222
    },
    names:arr1,
    some:arr2
  }
})

<!--html-->
<view class="container">
  <view>{{name}}</view>
  <view>{{people.n1}}</view>
  <view>n1 + n2:{{people.n1 + people.n2}}</view>
  <view>n1 > n2:{{people.n1 > people.n2}}</view>
  <view wx:for="{{names}}" wx:key="*this">{{item}}</view>
  <view wx:for="{{some}}" wx:key="id">{{item.name}}</view>
</view>

条件渲染

Page({
  data: {
    score:96
  }
})
<view wx:if="{{score>70 && score<90}}">等级B</view>
<view wx:elif="{{score>0 && score<70}}">等级C</view>
<view wx:else>等级A</view>

block

Page({
  data: {
    name:"Siee",
    score:96
  }
})
<block wx:if="{{score === 96}}">
    <view>{{name}}</view>
    <view>{{score}}</view>
    <view>优</view>
</block>
<block wx:else>
    分数不符合要求
</block>

block是虚拟节点，不会渲染在页面中

循环和block

Page({
  data: {
    some:arr2
  }
})
<block wx:for="{{some}}" wx:key="id">
    <view>{{item.name}}</view>
    <view>啦啦啦</view>
</block>

使用模版

模版的书写 要有name属性作为标识

<template name="renderName">
    <view>{{name}}</view>
</template>

放入虚拟节点时

<template name="renderList">
    <block wx:for="{{some}}" wx:key="id">
      <view>{{item.name}}</view>
      <view>啦啦啦</view>
    </block>
</template>

<template name="renderScore">
    <block wx:if="{{score === 96}}">
      <view>{{name}}</view>
      <view>{{score}}</view>
      <view>优</view>
    </block>
    <block wx:else>
      分数不符合要求
    </block>
</template>

模版的使用 is属性填写设置的name，data给模版传入数据；可以使用es6语法简写

Page({
  data: {
    name:"Siee",
    score:96,
    some:arr2
  }
})
<template is="renderScore" data="{{name,score}}"></template>
<template is="renderList" data="{{some:some}}"></template>
<template is="renderName" data="{{name:'Siee'}}"></template>

模版复用
模版可以单独写入template.wxml；文件若只当前页面引入就存在当前文件夹，若多个页面引用可以放入common文件夹；引用时：

<import src="template.wxml"/>

另一种模版复用
include标签所在位置，内容会直接替换成header.wxml中的内容

<include src="header.wxml"/>

事件

bind:事件类型=“回调函数名字” 有冒泡；冒号可以省略

<view bind:tap="onTap">点我打印信息</view>
Page({
    onTap(event){
        console.log(event)
    }
})

部分打印结果

currentTarget:{  //触发事件的节点
    dataset:{},  //通过data-前缀设置
    id:"",  //设置id会使操作很便捷
},
detail:{  //点按的横纵坐标
    x:数字,
    y:数字
},
target:{  //真正点按的节点
    dataset:{},  //通过data-前缀设置
    id:"",  //设置id会使操作很便捷
},
type:"tap" //事件类型

阻止冒泡
把bind换成catch

样式 wxss

单位：rpx
规定屏幕宽度是750rpx，自适应

支持的选择器

• .class
• #id
• element
• element,element
• :after
• :before

作用域

页面的wxss只对当前页面有效，是局部作用域，在页面容器.container外层还有个<page></page>标签，也可以设置样式
app.wxss是全局作用域，里面的样式会应用在每个页面

公共样式引入
@import '路径';
行间样式
可以是字符串，也可以是表达式

<text style="font-size:20pt;color:{{color}};">点我打印信息</text>

Page({
    color:"orange"
})

wxs辅助渲染

小程序的脚本语言，与JavaScript语法类似，不支持ES6语法

Page({
    names:'Siee,Tom,Jerry,Setich' 
    //是一个字符串，而不是数组，需要用wxs做处理
})

<wxs module="tool">  //作为标识
  function createNames(names){
    
    return names.split(',') //转为数组
  }

  module.exports = createNames;  //抛出
</wxs>

<view wx:for="{{tool(names)}}">{{item}}</view>   //使用，传递参数

也可以，tool.wxs文件下

function createNames(names){
    
    return names.split(',') //转为数组
}

module.exports = createNames;  //抛出

使用：

<wxs src="tool.wxs" module="tool"></wxs>

更新页面（异步更新页面）

访问实例 this
调用API setData

<viewclass="pressBtn">
    <view>{{magicNumber}}</view>
    <text bind:tap="onTap">点我打印信息</text>
</view>
<view>{{num}}</view>

let maN = Math.random()

Page({
  data: {
    magicNumber:maN,
    num:Math.floor(maN*1000)
  }
  onTap(){
    this.setData({
      magicNumber: Math.random()
    })
    let {magicNumber} = this.data;
    this.setData({
      num:Math.floor(magicNumber*1000)
    })
  }
})

组件

• 组件是视图层的基本组成单元
• 组件自带一些功能与微信风格的样式
  注意：所有组件与属性都是小写，以连字符-连接

常用组件

进度条

<progress percent="60" color="orange"></progress>

刚开始不会显示，因为align-items: center;所以手动加上宽度就好了

输入框

<input type="text" value="" bindinput="onInputChange"/>
 
onInputChange(event){
console.log(event.detail.value)
// return Math.random()
}

bindinput 不要有冒号！

自定义组件

pages中新建文件夹，名字自定义，要包括wxml，wxss，js，json文件

wxml中，写结构

wxss中，写样式

js中，注册Component({})

json中，配置{"component":true}

在应用组件的文件夹中也要加入配置，然后就可以应用了

{
    "usingComponents":{
        "magic-number":"/pages/magicNumber/mnum"
    }
}

<magic-number></magic-number>

要用连字符链接，直接可以作为标签使用；路径不需要带后缀

自定义组件的事件和属性

事件
注意现在写的不是页面而是组件，所以函数要写在methods:{}中
想要组件中的数据影响页面中数据，要用到triggerEvent方法

Component({
    data:{
        magicNumber:Math.random()
    },
    attached(){ //在组件实例进入页面节点树时执行
        this.triggerEvent('getMagicNumber',this.data.magicNumber)
    },
    methods:{
        onTap(){
            this.setData({
                magicNumber:Math.random()
            })

            this.triggerEvent('getMagicNumber',this.data.magicNumber)
        }
    }
    
})

<magic-number bind:getMagicNumber="onGetMagicNumber"></magic-number>

Page({
    onGetMagicNumber(event){
    console.log(event)
    this.setData({
      num: Math.floor(event.detail*1000)
    })
  }
})

属性
定义属性properties

<magic-number now-in="Index" bind:getMagicNumber="onGetMagicNumber"></magic-number>

Component({
    properties:{
        nowIn: String
    }
})
<view class="pressBtn">
    <view>{{magicNumber}}</view>
    <text bind:tap="onTap">点我打印信息</text>
</view>
<view>{{nowIn}} is here!</view>

在attached中打印this.data会同时出现data和自定义属性中的内容

路由

• 跳转到
• 重定向
• 跳到某个tab
• 回退
• 重加载

navigator
url
open-type

navigate wx.navigatorTo(object)
redirect wx.redirectTo(object)
switchTab wx.switchTab(object)
navigateBack wx.navigateBack(object)
reLaunch wx.reLaunch(object)

使用navigator组件跟使用API导航效果一样

授权API

授权方式

用户信息
授权button

<button 
    open-type="getUserInfo"     
    bindgetuserinfo="onGetUserInfo"
>获取用户信息</button>

出现弹框：选择->拒绝和允许
拒绝时，detail:{errMsg:"getUserInfo:fail auth deny"}
允许时，detail:{errMsg:"getUserInfo:ok"}

其它授权信息
wx.authorize(object)先进行授权，直接获取信息，未授权会先进行授权

wx.authorize({
      scope:'scope.userLocation',  //授权地理位置
      success: msg => console.log(msg,'location success'),
      fail: e => console.log(e,'location fail')
    })

wx.getLocation({
      type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function(res){
        console.log(res)
      },
      fail: function(e) {
        console.log(e)
      },
      complete: function() {
        // complete
      }
    })

如果获取位置授权被拒绝，将不会再出现弹框

wx.getSetting({
      success: msg => console.log(msg)
    })
//返回结果
authSetting:{
    scope.userInfo:true
    scope.userLocation:true
}
//获取过授权的都会显示在这里，被拒绝的为false，允许的为true

如果想要重新设置授权信息

wx.openSetting({ //打开授权信息面板
      success: msg => console.log(msg) //回调函数在设置完毕后执行
    })

使用缓存

//异步
wx.setStorage({
          key: 'name',
          data: {p1:'Siee'}, 
          success: function(res){
            wx.getStorage({
              key:'name',
              success: (data) => console.log(data)
            })
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
//同步
wx.setStorageSync('names', 'Tom') 
let ns = wx.getStorageSync('names')