小程序的使用

最新推荐文章于 2022-06-29 22:15:29 发布

z321616764

最新推荐文章于 2022-06-29 22:15:29 发布

阅读量1.6k

点赞数 53

文章标签：小程序教学 js

本文链接：https://blog.csdn.net/z321616764/article/details/107620199

版权

文件介绍

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文件↓

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 程序发送错误

页面的生命周期

onLoad 页面加载
onReady 渲染完毕
onShow 显示
onHide 隐藏
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, // 纯数据字段
  },

53
点赞
踩
12

收藏

觉得还不错? 一键收藏
42
评论
小程序的使用

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

扫一扫