微信小程序全了解

最新推荐文章于 2024-07-24 16:18:16 发布

置顶碉堡飞哥

最新推荐文章于 2024-07-24 16:18:16 发布

阅读量2k

点赞数 1

分类专栏：前端小程序

本文链接：https://blog.csdn.net/qq_27064559/article/details/82141546

版权

前端同时被 2 个专栏收录

183 篇文章 3 订阅

订阅专栏

小程序

8 篇文章 0 订阅

订阅专栏

各个组件的开发和使用请看https://blog.csdn.net/m0_38082783/article/details/78853722
本博客只提示提醒和注意项目

注意
1app.js,app.wxss对整个小程序项目都有效

2调用data数据用
this.data.shouType（名字）

3可以调用app.js的参数和函数
其它页面用getApp()引入
var app = getApp();
//调用
app.data.userAppName

4列表渲染
wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供
1字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

5设置页面背景色

page {
  display: block;
  min-height: 100%;
  background-color: red;
}

6事件相关

//bindtap绑定点击事件，事件名后不加()，点击事件传点击本身，用data-来传
<image bindtap='viewImage' data-src='{{item}}' class='imageItem' src='{{item}}'></image>

//跳转页面
wx.navigateTo({
  url: 'test?id=1' //可传参数，参数可以在data-属性中赋予。
})

//另一个页面的onLoad的option可以拿到传的参数
onLoad: function (options) {}

常见事件（不全）
这里写图片描述
事件绑定和冒泡
事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0
起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

页面事件处理函数

onPullDownRefresh()
监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()
监听用户上拉触底事件。
可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。

onReachBottom()
监听用户上拉触底事件。

scroll-view也有触发事件
bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件

7常用的page函数
这里写图片描述

8调试，使用后缀有[sm]的文件调试
9app.json设置
1小程序的页面由4个文件组成，而且4个文件的名字必须一致。

//app.json内引入文件是引入同个文件夹内的4个文件
"pages/index/index",

2window设置
这里写图片描述

9模版与引入模版

import
import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{...item}}"/>

1 import 的作用域
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

2 include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

3然后模块绑定的方法在各种调用者的js中定义

10赋值

1 data.num为非对象时的赋值
	this.setData({
      num: data.num
    });
2 data.num为对象时的赋值
	this.setData(data.num);

相关UI组件

1weui
1、在GitHub上https://github.com/weui/weui-wxss/下载程序代码
2、我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下
3、新建微信小程序项目，将weui.wxss文件导入到小程序项目的根目录下
这里写图片描述
4、在项目中引用：在全局app.wxss中加入weui.wxss的引用- @import “weui.wxss”;
5、页面骨架

<view class="page">
<view class="page__hd"></view><!--页头-->
<view class="page__bd"></view><!--主体-->
<view></view><!--未设置页脚-->
</view>
//除此之外都是按照weui-开头后接组件名称，例如class=”weui-footer”
<view class="weui-footer">我是页脚</view>
//组件的子组件样式，例如view.weui-footer组件还有链接和版权信息。
<view class="weui-footer">
<view class="weui-footer__links">
    <navigator url="" class="weui-footer__link">上海物联网科技有限公司</navigator>
</view>
<view class="weui-footer__text">Copyright © 程序媛专用</view>
</view>

demo：

<view class="page">
    <view class="page__hd">
        <view class="page__title">Button</view>
        <view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view>
    </view>
    
    <view class="page__bd page__bd_spacing">
        <button class="weui-btn" type="primary">页面主操作 Normal</button>
        <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>

        <button class="weui-btn" type="default">页面次要操作 Normal</button>
        <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>

        <button class="weui-btn" type="warn">警告类操作 Normal</button>
        <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>

        <view class="button-sp-area">
            <button class="weui-btn" type="primary" plain="true">按钮</button>
            <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>

            <button class="weui-btn" type="default" plain="true">按钮</button>
            <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>

            <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
            <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
            <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
        </view>
    </view>
</view>

2Wux Weapp
下载地址
通过 GitHub 下载 Wux Weapp 的代码，然后将dist/ 目录拷贝到自己的项目中。按照如下的方式使用组件，以 Badge 为例，其它组件在对应的文档页查看

//在 page.json 中引入组件
"usingComponents": {
    "wux-badge": "../../dist/badge/index"
}
//在 page.wxml 中使用组件
<wux-badge count="22" />
<wux-badge count="44" />
<wux-badge count="66" />

组件库文件体积过大的问题

首先将 dist/ 目录下对应组件（如 actionsheet）拷贝至 demo 目录；
其次看其对应目录下 index.json 是否存在依赖组件，若存在则一一拷贝；
然后看组件是否依靠 JavaScript 主动调用（查看对应文档可得知或存在 index.js 文件中），是则拷贝 index.js
文件，并删除不需要的组件引用；
最后查看组件目录下 index.js 是否存在对帮助方法的引用，若存在则拷贝 helpers 目录（抑或直接拷贝不管是否存在引用）。
3minUI

//安装 Min，-g 安装到全局目录，必须使用全局安装。
npm install -g @mindev/min-cli
//安装完成后执行 min -V 判断是否安装成功
min -V

分支一，查看实例代码
//示例项目是放在 min-cli 工程下的，首先需要通过 git 将仓库 clone 下来
git clone https://github.com/meili/min-cli
//进入小程序示例项目，在工程的 example/min-weapp 目录下
cd ~/min-cli/example/min-weapp
//安装项目依赖
npm install
//开启本地调试。未安装 min 命令行工具？点击这里查看 安装教程
min dev
打开微信开发者工具，选择 dist 文件夹，浏览项目。
//进入到示例项目目录下
cd ~/min-weapp
//使用 Min 设计的 new 指令，快速新增一个页面
min new about

分支二，自己创建个新的
cd 安装地址
//创建项目
min init enterprise
//进入项目
cd enterprise
//开启本地调试
min dev

4，3大组件对比

wux优秀点：

9宫格
日历选择
评分
上传
手风琴
条形码
卡片
通告栏
二维码
步骤条
顶部提示
筛选栏
数字密码
下拉刷新

min优势点(没事别用，麻烦)

进度条
输入框
列表漂亮
通告栏
搜索栏
倒计时设计得漂亮
加载
遮罩层
选项卡

weui

上传
九宫格
表单预览
各种像微信原生的弹出框

常遇问题

1小程序实现遮罩层
这里写图片描述

//wxml
<button bindtap="showview">Show</button>
<view class="bg" bindtap='hideview' style='display:{{display}}'></view>
<view class="show" bindtap='hideview' style='display:{{display}}'>申请成功
<view class='txt'>您的密码为:123456</view>
</view>
 
//css
.bg {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.7;
  opacity: 0.70;
  filter: alpha(opacity=70);
}
.show {
  display: none;
  text-align: center;
  position: absolute;
  top: 45%;
  left: 20%;
  width: 53%;
  height: 10%;
  padding: 8px;
  border: 8px solid #e8e9f7;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}
.txt{
  margin-top: 20rpx;
  font-size: 28rpx;
  color: royalblue
}

//js
Page({
  data: {
    display:''
  },
  showview: function() { 
    this.setData({
      display: "block"
    })
  },
  hideview: function() {
    this.setData({
      display: "none"
    })
  }
})

2小程序页面禁止滑动
只需要在当前页面的json文件里加上这个就ok了。

"disableScroll": true

3小程序对弹性布局flex支持得非常好，推荐使用
rpx 相当于 rem
每个子页面的json文件必须有{}，子页面的json不可配置page了，可配置window，插件什么的
每个子页面的js文件必须有Page({})
Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

极客行为：在app.json直接注册页面即可生成对应文件夹和文件

4swiper组件注意
其中只可放置<swiper-item/>组件，否则会导致未定义的行为

5模块化
可以存放一些公共的组件和方法

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

需要注意的是：

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports
的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules
时候建议拷贝出相关的代码到小程序的目录中或者使用小程序支持的 npm 功能。

// newsData.js
var newsData = [{
  "name":"lxf",
  "age":12
}]

module.exports = {
  newsData:newsData
}

//在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

//.js
var newsData = require("../data/newsData.js");

Page({
  onLoad:function(){
    console.log(newsData);
  }
})

6 showToast时间一般设置为800（测试者测试所得，不会太长也不会太短）

7var app = getApp();获取app.js的内容
8js修改子页面标题
wx.setNavigationBarTitle({
title: that.data.mername//页面标题为路由参数
})

9微信小程序的picker组件使用对象数组
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

data: {  
        Data: [{id:0,value:'a',name:'A' },{id:1,value:'b',name:'B' }], 
        Index: 0,
　　　　  currentId
    },
    
<picker class="picker" bindchange="bindChange" value="{{Index}}"  range="{{Data}}" range-key="name">
    <view >
      当前选择：{{Data[Index].name}}
    </view>
</picker>

10wxss