【微信小程序开发零基础入门】——微信小程序入门（2）

快乐与微笑的淘气

 关注

阅读 63

2022-02-17

微信小程序入门（2）

一、⼩程序结构⽬录

1.1. ⼩程序⽂件结构和传统web对⽐

在这里插入图片描述
通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

1.2. 基本的项⽬⽬录

在这里插入图片描述

二、⼩程序配置⽂件

2.1. 全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }
}

字段的含义

  1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序
    ⻚⾯定义在哪个⽬录。
  2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
  3. 完整的配置信息请参考 app.json配置

2.1.1. tabbar

在这里插入图片描述

2.2. ⻚⾯配置page.json

在这里插入图片描述

2.3. sitemap 配置-了解即可

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引

三、模板语法

3.1. 数据绑定

3.1.1. 普通写法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
 }
})

3.1.2. 组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
 }
})

3.1.3. bool类型

不要直接写 checked=false，其计算结果是⼀个字符串

<checkbox checked="{{false}}"> </checkbox>

3.2. 运算

3.2.1. 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

3.2.2. 算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
 }
})

3.2.3. 逻辑判断

<view wx:if="{{length > 5}}"> </view>

3.2.4. 字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
 }
})

3.2.5. 注意

花括号和引号之间如果有空格，将最终被解析成为字符串

3.3. 列表渲染

3.3.1. wx:for

项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择

  1. string 类型，表⽰ 循环项中的唯⼀属性 如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
  1. 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"

代码：

<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'
   }]
 }
})

3.3.2. block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3.4. 条件渲染

3.4.1. wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>

3.4.2. hidden

<view hidden="{{condition}}"> True </view>

类似 wx:if
频繁切换 ⽤ hidden
不常使⽤ ⽤ wx:if

四、⼩程序事件的绑定

4.1. wxml

<input bindinput="handleInput" />

4.2. page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})

4.3. 特别注意

  1. 绑定事件时不能带参数 不能带括号 以下为错误写法
<input bindinput="handleInput(100)" />
  1. 事件传值 通过标签⾃定义属性的⽅式 和 value
<input bindinput="handleInput" data-item="100" />
  1. 事件触发时获取数据
handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 }

五、样式 WXSS

5.1. 尺⼨单位

rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 。
在这里插入图片描述
建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。
使⽤步骤：

  1. 确定设计稿宽度 pageWidth
  2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth
  3. 在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

5.2. 样式导⼊

wxss中直接就⽀持，样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。
⽰例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

5.3. 选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

⽬前⽀持的选择器有：
在这里插入图片描述

5.4. ⼩程序中使⽤less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。
但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

  1. 编辑器是 vscode
  2. 安装插件 easy less
    在这里插入图片描述
  3. 在vs code的设置中加⼊如下，配置
    在这里插入图片描述
  4. 在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。

六、常⻅组件

6.1. view

代替 原来的 div 标签

  <view hover-class="h-class">
 点击我试试
  </view>

6.2. text

  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制（只有该标签有这个功能）
  4. 可以对空格 回⻋ 进⾏编码
    在这里插入图片描述

6.2.1. 代码

<text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

6.3. image

  1. 图⽚标签，image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载
    在这里插入图片描述
    mode 有效值：
    mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。
    在这里插入图片描述

6.4. swiper

微信内置轮播图组件

在这里插入图片描述
默认宽度 100% ⾼度 150px
在这里插入图片描述

6.4.1. swiper

滑块视图容器。

6.4.2. swiper-item

滑块
默认宽度和⾼度都是100%

6.5. navigator

导航组件 类似超链接标签
在这里插入图片描述
open-type 有效值：
在这里插入图片描述

6.6. rich-text

富文本标签
可以将字符串解析成 对应标签，类似 vue中 v–html 功能
在这里插入图片描述
代码

// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

6.6.1. nodes属性

nodes 属性⽀持 字符串 和 标签节点数组
在这里插入图片描述

⽂本节点：type = text
在这里插入图片描述

6.7. button

在这里插入图片描述

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>

在这里插入图片描述
size 的合法值
在这里插入图片描述
type 的合法值
在这里插入图片描述
form-type 的合法值
在这里插入图片描述
open-type 的合法值
在这里插入图片描述
open-type 的 contact的实现流程

  1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid
  2. 登录微信⼩程序官⽹，添加 客服 – 微信
  3. 为了⽅便演⽰，⽼师⾃⼰准备了两个账号
  4. 普通⽤⼾ A
  5. 客服-微信 B
  6. 就是⼲！

6.8. icon

在这里插入图片描述
在这里插入图片描述
代码:
js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }
})

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

6.9. radio

可以通过 color属性来修改颜色
在这里插入图片描述
需要搭配 radio-group ⼀起使⽤

6.10. checkbox

可以通过 color属性来修改颜色
在这里插入图片描述
需要搭配 checkbox-group ⼀起使⽤

七、⾃定义组件

7.1. 创建⾃定义组件

在这里插入图片描述
在⽂件夹内 components/myHeader ，创建组件 名为 myHeader
在这里插入图片描述
7.1.1. 声明组件
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
myHeader.json

{
  "component": true
}

7.1.2. 编辑组件
同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式
slot 表⽰插槽，类似vue中的slot
myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
 {{innerText}}
    <slot></slot>
</view>

在组件的 wxss ⽂件中编写样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

7.1.3. 注册组件
在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和
⾃定义⽅法
myHeader.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string类型
      type: String,
        value: 'default value',
   }
 },
  data: {
    // 这里是一些组件内部数据
    someData: {}
 },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
 }
})

7.2. 声明引⼊⾃定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
index.wxml

{
 // 引用声明
  "usingComponents": {
 // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
 }
}

7.3. ⻚⾯中使⽤⾃定义组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

7.4. 其他属性

7.5. 定义段与⽰例⽅法

Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。
在这里插入图片描述

7.6. 组件-⾃定义组件传参

  1. ⽗组件通过属性的⽅式给⼦组件传递参数
  2. ⼦组件通过事件的⽅式向⽗组件传递参数

7.6.1. 过程

  1. ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中
  2. ⽗组件 监听 onMyTab 事件
  3. ⼦组件 触发 bindmytap 中的 mytap 事件
    1. ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象
  4. ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs");

⽗组件代码

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
 内容-这里可以放插槽
</tabs>
// page.js
  data: {
    tabs:[
     {name:"体验问题"},
     {name:"商品、商家投诉"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },

⼦组件代码

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>
// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /**
   * 组件的初始数据
   */
  data: {
 },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
   }
 }
})

7.7. ⼩结

  1. 标签名 是 中划线的⽅式
  2. 属性的⽅式 也是要中划线的⽅式
  3. 其他情况可以使⽤驼峰命名
    1. 组件的⽂件名如 myHeader.js 的等
    2. 组件内的要接收的属性名 如 innerText
  4. 更多。。

八、⼩程序⽣命周期

8.1. 应⽤⽣命周期

在这里插入图片描述

8.2. ⻚⾯⽣命周期

在这里插入图片描述

8.3. ⻚⾯⽣命周期图解

在这里插入图片描述

相关推荐

【微信小程序开发小白零基础入门】微信小程序入门【建议收藏】

爱做梦的夏夏 192 0 0

微信小程序基础控件，入门（2），

Just_Esme 135 0 0

【微信小程序】微信小程序开发：从入门到精通

小桥流水2016 32 0 0

【微信小程序】小程序基础入门01

黎轩的闲暇时光 95 0 0

微信小程序开发基础入门笔记

洛茄 137 0 0

微信小程序-入门

代码小姐 34 0 0

微信小程序入门

苦茶如歌 227 0 0

微信程序开发之小程序入门

微笑沉默 144 0 0

微信小程序开发入门指南

闲嫌咸贤 62 0 0

零基础分分钟入门微信小程序开发，实战篇

棒锤_45f2 123 0 0

精彩评论（0）

0 0 举报