微信小程序学习笔记

1：简介

1. 用户扫一扫或搜索一下即可打开应用。
2. 微信有海量用户，粘性高
3. 开发适配成本低

2：目录结构

小程序结构目录

• pages

  • index
  • logs

• utils

• app.js

• app.json

• project.config.json

• sitemap.json //某些页面是否能被微信检索

开发者文档：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

• 全局配置app.json

{
  "pages": [
    "pages/index/index",//第一个页面
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",//下拉刷新文字，需开通下拉刷新
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {  //页面下面的菜单
    "list": [{ //list至少需要两项
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3:数据绑定

<view> {{msg}}</view>

Page({
    data:{
        msg:"hello world"
    }
})

4：数组和对象循环

Page({
    data:{
        list:{
            id:0,
            name:"猪八戒"
        }
    }
})

<view>
	<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引：{{index}}--{{item.name}}
    </view>
</view>

wx:key可以提高循环检索效率。

1. key必须是唯一的值
2. wx:key =”*this” 表示数组是一个普通数组

wx:for-item="item" wx:for-index="index"可以省略

对象循环wx:for="{{对象}}" wx:for-item="对象的值（键值）" wx:for-index="对象的属性（键名）"

Person{
    name:"起飞",
    age:22,
    height:174
}

5：block标签

占位符的标签

写代码的时候可以看到这个存在

渲染时会移除掉

将view换成block，可将标签去掉，最终循环变量可在一行展示

6：条件渲染

wx:if="{{ture/false}}"

hidden

应用场景：

• 当标签不是频繁切换显示，优先使用wx:if

  直接把标签从页面结构中删除

• 频繁切换用hidden

  使用display:none属性。

<view>
	<view>条件</view>
    <view wx:if="{{true}}">display</view>
    
    <view wx:if="{{true}}">if</view>
    <view wx:elis="{{false}}">elif</view>
    <view wx:else>else</view>
    
    <view hidden>hidden</view>
    <view hidden=""{{true}}""></view>
</view>

7：事件绑定

<input type="text" bindinput="handelInput"/>
<button bindtap="handletap" data-opt="{{1}}">
    +
</button>
<button bindtap="handletap" data-opt="{{-1}}">
    -
</button>
<view>{{num}}</view>

Pages({
    data:{
        num:0;
    },
    handelInput(e){
        this.setDate({num:e.detail.value})
    },
	handletap(e){
        e.currentTaget.opt
    }
})

8：样式

在750x屏幕中

750px=750rpx

把屏幕改为375

375px=750rpx

1rpx=0.5px.

• 样式导入

utils下新建文件夹styles，文件夹里新建common.wxss

引用：@import "../../styles/common.wxss"

• 选择器

小程序不支持通配符

9：常见组件

• view
• text
  • 文本标签
  • 只有此标签可长按复制
  • 解码decode

<text selectable>长按复制 &nbsp(这是空格)</text>

• 图片

  • 本地图片不能超过2M，所以都使用外链图片
  • src：来源
  • mode：图片裁剪缩放格式//scaleToFill
  • lazy-load：懒加载，当图片在上下三屏范围类，图片会预加载

• swiper

  • 轮播图
  • autoplay:自动播放
  • circular：轮播
  • interva：间隔时间。单位ms
  • indicator-dots：显示分页指示器

<swiper autoplay>
	<swiper-item><image src=""></image></swiper-item>
    <swiper-item><image src=""></image></swiper-item>
    <swiper-item><image src=""></image></swiper-item>
</swiper>

• navigator
  • 导航栏
  • 块级元素
  • url：跳转某个页面
  • target：跳转到其他小程序
  • open-type：navigate，保留当前页面，不能跳转tabbar里的页面，默认值；redirect，不保留当前页面；switchTab：跳转tabbar，关闭其他页面；reLauch：关闭所有页面，打开应用某个页面

<navigator url=""></navigator>

• rich-text
  • 富文本标签

<rich-text nodes="{{html}}"></rich-text>

Page({
    data:{
        html:[
            name:"div",
            attr:{
            class:"my_div",
            style:"color:red"
            },
    children:[{
        name:"p",
        attr:{},
        children:[{
            type:"text",
            text:"hellp"
        }]
    }]
        ]
    }
})

• button

  • 按钮
  • open-type:contact：打开客服，在小程序官网，功能-客服。添加；share：分享小程序，不能分享朋友圈；getPhonNumber：获取用户手机号码，需要结合事件使用，只有企业小程序有权限使用，绑定事件bindgetphonenumber，获取回调函数；getUserInof：获取用户信息，需绑定事件，处理函数；openSetting：用户查看更改小程序能获得的权限

• icon

  • 图标
  • type：图标类型，sucess、warning等参数
  • size：大小
  • color：颜色

• radio

  • 单选框
  • 必须和父元素radio-group一起使用
  • value选中的单选框值

<radio-group bindchange="handelchange">
	<radio value="male">男</radio>
    <radio value="female">女</radio>
</radio-group>
<view>你选中的值是：{{gender}}</view>

Page({
	data:{
		gender:""
	},
	handleChange(e){
		let gender=e.detail.value;
		this.setData({gender})
	}
	
})

• checkbox
  • 复选框
  • 需和checkbox-group一起使用

10：自定义组件

slot标签，占位标签，内容传递过来时，替代

自定义组件中：

<tabs>
	<slot>
    
    </slot>
</tabs>

父组件中：

<tabs>
  你好啊
</tabs>

相关文章

Bootstrap学习笔记

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://blog.sci.ci/2020/04/07/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/