小程序的使用

时间:2020-7-29 作者:admin


文件介绍

  • 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,加上用户名+昵称,存入到自己的服务器的数据库中

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。