小程序的使用

文件介绍

• sitemap.json 站点地图 微信搜一搜里面哪些页面可以展示，哪些不能
• project.config.json 项目配置
• app.js 全局业务逻辑
• app.json 全局的小程序配置
• app.wxss 全局的样式
• pages 存放页面的文件夹
• ——index 首页页面文件夹
• ——index.js 首页的业务逻辑
• ——index.json 首页的配置
• ——index.wxml 首页的模板(html)
• ——index.wxss 首页的样式(css)
• ——logs 日志页面文件夹
• utils 存放工具的文件夹

基础组件

view 块元素
text 行内元素

文本渲染

{{ }}

条件渲染

wx:if="{{ }}"
wx:elif=" "
wx:else

列表渲染

wx:for="{{list}}" wx:key=" index"
wx:for 自带item index
wx:for-item="myitem" 自定义item名称
wx:for-index="myindex" 自定义修改index名称

模板

wxml里面：

<template name="gotoc">
    <view>
        <view>{{name}}</view>
        <view>{{age}}</view>
    </view>
</template>
<template is="gotoc" data="{{...sng[0]}}"></template>
<template is="gotoc" data="{{...sng[1]}}"></template>
<template is="gotoc" data="{{...sng[2]}}"></template>

js里面

sng:[
      {name:"zsq",age:25},
      {name:"hlk",age:24},
      {name:"wry",age:23},

    ]

导入模板

<import src="xxx.wxml"/>

引入内容

<include src= " xxx.wxml"/>

目录结构

app.json 整个小程序的配置
pages页面 配置在最前面的默认显示

window：
"window": {
    "backgroundTextStyle": "light", 背景文字
    "navigationBarBackgroundColor": "#f70", 导航栏背景颜色
    "navigationBarTitleText": "小程序入门", 导航栏标题
    "navigationBarTextStyle": "black"    导航栏文字颜色 black 和white 可选
  },

组件

input
type=" " （↓）

• number 数字输入键盘
• text 文本输入键盘
• idcard 身份证输入键盘
• digit 带小数点的数字键盘
• password 是否为密码 true或false
• maxlength 最大输入长度，设置为 -1 的时候不限制最大长度

image

• mode 缩放模式

api wx开头的

wx.showToast({title:" "}) 吐司
wx.getStorageSync（key） 获取本地存储
wx.setStorageSync(key，val) 设置本地存储

wx.request({   
url:"xxx",
method:"",
success(res){
console.log(res)
}
})  //网络请求

wx.setNavigationBarTitle({
title:" 设置标题",
icon:" "
})

wx.stopPullDownRefresh({}) 停止下拉刷新
wx.showLoading 开始加载
wx.hideloadind 加载结束

bind事件

• bindtap 轻点
• bindinput 表单的值是否发生改变
• bindfocus 输入框聚焦时触发
• bindblur 输入框失焦时触发
• bindconfirm 点击完成按钮

监听事件

 <view bindTap="showMsg"/>

事件的参数获取
表单 **js**中通过 e.detail.value
其他组件

<button bindtap="ShowMsg" data-msgz="自定义吐司">自定义</button>

wx.showToast({
              title:e.target.dataset.msgz,
              })	

事件的函数

onReachBottom 触底
onPullDownRefresh 下拉刷新

json文件↓

导航

navigator
url=“要跳转页面的url路径”
open-type：

• switchTab 切换底部栏
• navigate 默认跳转
• exit 退出
• relaunch 重启
• redirect 重定向
• navigateBack 返回

//跳转到其他小程序
<navigator target="miniProgram" open-type="navigate" app-id="wxb8f91a4e8d7eb4ae">打开绑定的小程序</navigator>

navigator target="miniProgram" open-type="navigate" app-id="小程序ID"

JS跳转

wx.switchTab({  
      		url: '/pages/base/base',
	})

 wx.redirectTo({  重定向 
      url: '/pages/zsq/zsq',
  })

wx.navigateBack() 返回
wx.swithTab({ url:" "}) 切换底部栏

页面传参

//通过url传参
pages/base/base?name=zsq&age=30

取参数 TabBar

"tabBar": {
    "color": "#ccc", 文字颜色
    "selectedColor": "#0000cd", 选中文字的颜色
    "list": [
      {
      "pagePath": "pages/index/index", //页面路径
      "text": "首页",  //tabbar名称
      "iconPath": "pages/images/zwpj2.png",   图片的地址
      "selectedIconPath": "pages/images/zwpj.png"  选中图片的地址
     },
     {
      "pagePath": "pages/base/base",
      "text": "笑话",
      "iconPath": "pages/images/res2.png",
      "selectedIconPath": "pages/images/res.png"
     }
  ]
  },

小程序生命周期

• onLaunch 程序启动
• onShow 程序切换到前台
• onHide 程序切换到后台
• onError 程序发送错误

页面的生命周期

1. onLoad 页面加载
2. onReady 渲染完毕
3. onShow 显示
4. onHide 隐藏
5. onUnload 卸载(redirect、navigateBack触发)

全局数据使用(传递)

在app.js 定义

 globalData: {
    userInfo: null,
    num:20
  },

在其他Page文件使用

const app = getApp(); /*引入*/

在监听生命周期函数中显示

 this.setData({
      num:app.globalData.num
  })

页面跳转

//标签跳转
<navigator url="/pages/base/base" open-type="navigate">naviga</navigator>
<navigator url="/pages/base/base" open-type="switchTab">笑话</navigator>
<navigator url="/pages/zsq/zsq" open-type="redirect">没返回的</navigator>

//js跳转
Gofile1(){  //普通跳转
    wx.switchTab({
      url: '/pages/base/base',
    })
  },

  Gofile2(){  //不需要返回的跳转
    wx.redirectTo({
      url: '/pages/zsq/zsq',
    })
  },

小程序的组件

定义组件

组件文件夹 cell

• cell.js
• cell.json
• cell.wxml
• cell.wxss

在页面的json中注册组件

{
  "usingComponents": {
    "cell":"/components/cell/cell"
  }
}

在页面的wxml中使用

<cell></cell>

组件的插槽

目的：组件可以嵌套

页面中传入插槽内容

<cell><view>定义插槽内容</view></cell>

在组件接收

<view><slot></slot></view>

命名插槽

定义

<view>
<view slot="header"></view>
<view slot="footer"></view>
</view>

使用插槽

<slot name="header"></slot>
<slot name="footer"></slot>

在组件的options选项中配置

multipleSlot:true

样式隔离

options选项中配置

// styleIsolation:'isolated',   样式隔离方式    
// isolated 隔离
// apply-shared 页面样式分享到组件 
// shared 双向共享

外部类

组件中配置

externalClasses:["cell-class"],

组件中使用

<class="cell-class">

页面中传入

<cell cell-class="mycell">

在页面css中编写mycell

.mycell{height:200rpx !important;}

组件的传参

页面参数传递

<cell url="xx/x/x/"></cell>

组件作用定义

properties: {
    url:{type:String,value:''},
  },

使用参数

this.data.url

构造器

page({})
Components({})

pageLifetimes 页面的生命周期

• show显示
• hide隐藏
• resize改变大小
• lifetimes 组件的生命周期
• created 创建
• attached 插入到页面
• ready 渲染完毕
• move 移动
• detached 移除
• error 错误

behaviors 混合

var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
})

observers 监听

 observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }

纯数据字段

纯数据字段是一些不用于界面渲染的data字段，可以用于提升页面更新性能

 options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },

登录

小程序

<button open-type="getUserInfo" ></button>

wx.login({ }) 拿到一个code信息
通过ajax把用户信息和code发送给服务器

服务器

appid+Appscecret+code
发送给微信服务器
得到openid，得到session_key
openid就是用户的唯一识别id
有了openid，加上用户名+昵称，存入到自己的服务器的数据库中