微信小程序（1）基础

Carlos_0

已于 2022-02-06 01:39:23 修改

阅读量977

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

于 2022-01-28 01:35:46 首次发布

本文链接：https://blog.csdn.net/qq_45705923/article/details/122710380

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.1注册小程序账号

https://mp.weixin.qq.com/

1.2下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

2.1新建页面

在app.json中添加页面，保存后会自动添加页面

"pages": [
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
  ],

2.2view组件的基本使用：

<!--pages/list/list.wxml-->
<text>pages/list/list.wxml</text>
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

/* pages/list/list.wxss */
.container1 view{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1{
  display: flex;
  justify-content: space-around;
}

在这里插入图片描述

2.2scroll-view的基本使用

<!--pages/list/list.wxml-->
<text>pages/list/list.wxml</text>
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view> 
</scroll-view>
<scroll-view class="container2" scroll-x>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
}
.container2 view{
  width:100px;
  height:100px;
  text-align:center;
  line-height:100px;
  display: inline-block;
}
.container1 view:nth-child(1){background-color: lightgreen;}
.container1 view:nth-child(2){background-color: lightskyblue;}
.container1 view:nth-child(3){background-color: lightpink;}
.container2 view:nth-child(1){background-color: lightgreen;}
.container2 view:nth-child(2){background-color: lightskyblue;}
.container2 view:nth-child(3){background-color: lightpink;}
.container1{
  border: 1px solid red;
  width: 100px;
  height: 120px;
}
.container2{
  white-space: nowrap;
  border: 1px solid red;
  width: 120px;
  height: 100px;
}

在这里插入图片描述

2.3swiper的基本使用

<swiper class="swiper-container" indicator-dots>
  <swiper-item> 
    <view class="item">A</view>
  </swiper-item>
  <swiper-item> 
    <view class="item">B</view>
  </swiper-item>
  <swiper-item> 
    <view class="item">C</view>
  </swiper-item>
</swiper>

.swiper-container{
  height:150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item {background-color: lightgreen;}
swiper-item:nth-child(2) .item {background-color: lightskyblue;}
swiper-item:nth-child(3) .item {background-color: lightpink;}

在这里插入图片描述
swiper常用属性

2.4 text和rich-text组件

通过text组件的selectable属性，实现长按选中文本内容效果。

<text selectable>长按选中</text>

通过 rich-text 组件的nodes属性节点，把HTML字符串渲染为对应的UI 结构：

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

2.5button组件

<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">默认按钮</button>

<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<button size="mini" plain>默认按钮</button>

<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

在这里插入图片描述

2.5 image组件

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：

<image src="/image/1.png" mode="widthFix"></image>

在这里插入图片描述

3.1数据绑定

在页面对应的.js文件中，吧数据定义到data对象中即可，在页面.wxml中使用Mustache语法（插值语法）渲染绑定的数据。
绑定内容：

  data: {
    info:'hello world'
  },

<view>{{info}}</view>

绑定属性：

  data: {
    imgSrc:'/image/1.png'
  },

<image src="{{imgSrc}}"></image>

三元运算：

  data: {
    randomNum:Math.random()*10
  },

<view>{{randomNum >= 5 ? '大于等于5':'小于5'}}</view>

算数运算：

  data: {
    randomNum:Math.random().toFixed(2)
  },

<view>{{randomNum * 100}}</view>

3.2事件绑定

在这里插入图片描述
事件对象event的属性

3.2.1bindtap的语法格式

<button bindtap="btnTapHandler">按钮</button>

Page({
  btnTapHandler(e){
    console.log(e);
  },
})

3.2.2data中的数据赋值

调用this.setData方法

<button bindtap="btnTapHandler">+1</button>

Page({
  data: {
    count:0
  },
  btnTapHandler(e){
    this.setData({
      count:this.data.count+1
    })
  },
})

3.2.3事件传参

可以为组件提供"data-*"自定义属性传参，其中*是参数的名字
在事件处理函数中，通过 event.target.dataset.参数名即可获取到具体参数的值

<button bindtap="btnTapHandler" data-info="{{2}}">传参</button>

btnTapHandler(e){
    console.log(e.target.dataset.info);
},

3.2.4bindinput的语法格式

<input bindinput="inputHandler"/>

inputHandler(e){
    console.log(e.detail.value);
},

3.2.5实现文本框和data之间的数据同步

<input value="{{msg}}" bindinput="inputHandler"/>

input{
  border:1px solid #eee;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}

data: {
  msg:"你好，"
},
inputHandler(e){
  this.setData({
    msg:e.detail.value
  })
},

4.1条件渲染

使用wx:if="{{condition}}"来判断是否要渲染该代码块，也可以使用wx:elif和wx:else来添加判断

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

结合<block>一次性控制多个组件的展示与隐藏

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

4.2 hidden

直接使用hidden="{{condition}}"也能控制元素的展示与隐藏

<view hidden="{{false}}">hiddden</view>

wx:if 与 hidden 的对比

运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
使用建议
频繁切换时，建议使用 hidden
控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else 进行展示与隐藏的切换

4.3列表渲染

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构

<view wx:for="{{arr1}}">
索引是：{{index}}，item项是：{{item}}
</view>

data: {
  arr1:['浙江','上海','北京']
},

使用wx:for-index以指定当当前循环项的索引的变量名；使用wx:for-item可以指定当前项的变量名

<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}---{{itemName}}
</view>

小程序在实现列表渲染时，建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率（指定key时不用加大括号）

<view wx:for="{{userList}}" wx:key="id">
{{index}}---{{item.id}}:{{item.name}}
</view>

userList:[
  {id:1,name:'小红'},
  {id:2,name:'小明'},
  {id:3,name:'小白'},
]

5.1wxss模板样式

rpx尺寸单位：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为750rpx）

使用wxss提供的@import语法,可以导入外联的样式表

5.2全局配置文件

window节点常用配置项
在这里插入图片描述

"window": {
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "backgroundColor": "#eee",
  "backgroundTextStyle": "dark",
  "onReachBottomDistance": 50
},

也可以在每个页面的json文件中设置,直接写属性和属性值

5.3 tabBar

tabBar的6个组成部分：
backgroundColor：tabBar 的背景色
selectedlconPath：选中时的图片路径
borderStyle：tabBar 上边框的颜色
iconPath：未选中时的图片路径
selectedColor：tab上的文字选中时的颜色
color：tab 上文字的默认（未选中）颜色

tabBar节点的配置项：
在这里插入图片描述
每个tab项的配置选项：

在app.json中：

  "tabBar":{
    "list":[
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      }
    ]
  },

6.1 网络数据请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

只能请求 HTTPS 类型的接口
必须将接口的域名添加到信任列表中

  getInfo(){
    wx.request({
      url: 'https://www.****.cn/api/get',
      method:'GET',
      data:{
        name:'zs',
        age:20
      },
      success:(res)=>{
        console.log(res);
      }
    })
  },

由于小程序的宿主环境是微信客户端，不是浏览器，所以小程序中不存在跨域的问题，也不能叫Ajax请求，而叫发起网络数据请求。

Carlos_0

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信小程序（1）基础

1.1注册小程序账号https://mp.weixin.qq.com/1.2下载微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html2.1新建页面在app.json中添加页面，保存后会自动添加页面"pages": [ "pages/list/list", "pages/index/index", "pages/logs/logs" ],2.2view组件的基本使用：
复制链接

扫一扫