微信小程序入门到实战(1)-基础知识

1.微信小程序介绍

微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

1.1. 为什么是微信小程序 ?

  1. 微信有海量用户,而且粘性很高,在微信里开发产品更容易触达用户;
  2. 推广app 或公众号的成本太高。
  3. 开发适配成本低。
  4. 容易小规模试错,然后快速迭代。
  5. 跨平台。

1.2. 微信小程序历史

  • 2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「微信小程序」 需要注意的是,之前是叫做 应用号
  • 2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案,提供小程序在云端服务器的技术方案。
  • 2017年1月9日,微信推出的“小程序”正式上线。“小程序”是一种无需安装,即可使用的手机“应用”。不需要像往常一样下载App,用户在微信中“用完即走”。

1.3. 疯狂的微信小程序

  1. 微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万
  2. 信息传达数达到450亿,较去年增长18%;视频通话4.1亿次,增长100%
  3. 小程序覆盖超过200+行业,交易额增长超过6倍,服务1000亿+人次,创造出了5000亿+的商业价值

1.4. 还有其他的小程序 不容忽视

  1. 支付宝小程序
  2. 百度小程序
  3. QQ小程序
  4. 今日头条 + 抖音小程序

1.5. 体验

1.5.1. 官方微信小程序体验

小程序示例源码

1.5.2. 其他优秀的第三方小程序
  • 拼多多
  • 滴滴出行
  • 欢乐斗地主
  • 智行火车票
  • 唯品会
  • 。。。

2. 环境准备

开发微信小程序之前,必须要准备好相应的环境

2.1. 注册账号

建议使用全新的邮箱,没有注册过其他小程序或者公众号的。

访问注册页面,耐心完成注册即可。

2.2. 获取APPID

由于后期调用微信小程序的接口等功能,需要索取开发者的小程序中的APPID,所以在注册成功后,可登录,然后获取APPID。

登录,成功后可看到如下界面

然后复制你的APPID,悄悄的保存起来,不要给别人看到。

2.3. 开发工具

下载地址

微信小程序自带开发者工具,集 开发 预览 调试 发布 于一身的 完整环境。

但是由于编码的体验不算好,因此 建议使用 vs code + 微信小程序编辑工具 来实现编码

vs code 负责敲代码,微信编辑工具 负责预览。

3. 第一个微信小程序

3.1. 打开微信开发者工具

注意 第一次登录的时候 需要扫码登录

3.2. 新建小程序项目

3.3. 填写项目信息

3.4. 成功

4. 微信开发者工具介绍

详细的使用,可以查看官网

5. 小程序结构目录

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

小程序框架提供了自己的视图层描述语言 WXMLWXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

5.1. 小程序文件结构和传统web对比

通过以上对比得出,传统web 是三层结构。而微信小程序 是四层结构,多了一层 配置.json

5.2. 基本的项目目录

6. 小程序配置文件

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json

注意:配置文件中不能出现注释。

6.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配置
6.1.1. tabbar

6.2. 页面配置 page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.jsonwindow 中相同的配置项。

6.3.sitemap 配置-了解即可

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引。

7. 模板语法

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。

7.1. 数据绑定

7.1.1. 普通写法
<view> {{ message }} </view>
Page({
  data: {
    message: ‘Hello MINA!‘
  }
})
7.1.2. 组件属性
<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})
7.1.3. bool类型

不要直接写 checked="false",其计算结果是一个字符串

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

7.2. 运算

7.2.1. 三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
7.2.2. 算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
7.2.3. 逻辑判断
<view wx:if="{{length > 5}}"> </view>
7.2.4. 字符串运算
<view>{{"hello" + name}}</view>
Page({
  data:{
    name: ‘MINA‘
  }
})
7.2.5. 注意

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

7.3. 列表渲染

7.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"

2.保留字 *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‘
    }]
  }
})
7.3.2. block

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

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

7.4. 条件渲染

7.4.1. wx:if

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

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>
7.4.2. hidden
<view hidden="{{condition}}"> True </view>

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

8. 小程序事件的绑定

小程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange

不同的组件支持不同的事件,具体看组件的说明即可。

8.1. wxml

<input bindinput="handleInput" />

8.2. page

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

8.3. 特别注意

1.绑定事件时不能带参数 不能带括号 以下为错误写法

<input bindinput="handleInput(100)" />

2.事件传值 通过标签自定义属性的方式 和 value

<input bindinput="handleInput" data-item="100" />

3.事件触发时获取数据

  handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)

    // 输入框的值
   console.log(e.detail.value);
  }

9. 样式 WXSS

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

CSS 相比,WXSS 扩展的特性有:

  • 响应式长度单位 rpx
  • 样式导入

9.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 即可。

9.2. 样式导入

wxss中直接就支持,样式导入功能。

也可以和 less中的导入混用。

使用@import语句可以导入外联样式表,只支持相对路径

示例代码:

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

9.3. 选择器

特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效!

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

目前支持的选择器有:

9.4. 小程序中使用less

原生小程序不支持less,其他基于小程序的框架大体都支持,如wepympvuetaro等。但是仅仅因为一个less功能,而去引入一个框架,肯定是不可取的。因此可以用以下方式来实现。

  1. 编辑器是vscode
  2. 安装插件 easy less

3. 在vs code的设置中加入如下,配置

    "less.compile": {
        "outExt":       ".wxss"
    }

在要编写样式的地方,新建 less文件,如 index.less,然后正常编辑即可。

10. 常见组件

https://developers.weixin.qq.com/miniprogram/dev/component/

重点讲解小程序中常用的布局组件 view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox

10.1. view

代替 原来的 div 标签

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

10.2. text

  1. 文本标签
  2. 只能嵌套text
  3. 长按文字可以复制(只有该标签有这个功能)
  4. 可以对空格 回车 进行编码

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

10.3. image

  1. 图片标签,image组件默认宽度320px、高度240px
  2. 支持懒加载

mode 有效值:

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

10.4.swiper

微信内置轮播图组件

默认宽度 100% 高度 150px

10.4.1. swiper

滑块视图容器。

10.4.2. swiper-item

滑块,默认宽度和高度都是100%

10.5. navigator

导航组件 类似超链接标签

open-type 有效值:

10.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/[email protected]" >‘></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‘)
  }
})
10.6.1. nodes属性

nodes属性支持 字符串标签节点数组

文本节点:type = text

  • nodes 不推荐使用 String 类型,性能会有所下降。
  • rich-text 组件内屏蔽所有节点的事件。
  • attrs 属性不支持 id ,支持 class 。
  • name 属性大小写不敏感。
  • 如果使用了不受信任的 HTML 节点,该节点及其所有子节点将会被移除。
  • img 标签仅支持网络图片。

10.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. 为了方便演示,我自己准备了两个账号
    1. 普通用户 A
    2. 客服-微信 B
  4. 就是干!

10.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>

10.9. radio

可以通过 color属性来修改颜色

需要搭配 radio-group 一起使用

10.10. checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group 一起使用

11. 自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

类似vue或者react中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面。

11.1. 创建自定义组件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成.

可以在微信开发者工具中快速创建组件的文件结构

在文件夹内components/myHeader,创建组件 名为 myHeader

11.1.1. 声明组件

首先需要在组件的 json 文件中进行自定义组件声明

myHeader.json

{
  "component": true
}
11.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;
}
11.1.3. 注册组件

在组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法

myHeader.js

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

11.2. 声明引入自定义组件

首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径。

index.wxml

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

11.3. 页面中使用自定义组件

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

11.4. 定义段与示例方法

Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。

11.5. 组件-自定义组件传参

  1. 父组件通过属性的方式给子组件传递参数
  2. 子组件通过事件的方式向父组件传递参数
11.5.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‘);
    }
  }
})

11.6. 小结

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

12. 小程序生命周期

分为应用生命周期页面生命周期

关于小程序前后台的定义和小程序的运行机制,请参考运行机制章节。

12.1. 应用生命周期

12.2. 页面生命周期

12.3. 页面生命周期图解

原文地址:https://www.cnblogs.com/replaceroot/p/11262929.html

时间: 2024-10-27 18:40:51

微信小程序入门到实战(1)-基础知识的相关文章

CK2020微信小程序入门与实战 常用组件API开发技巧项目实战

新年伊始,学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853  获取资料. 下载地址:https://pan.baidu.com/s/1hsU5EIS 微信小程序入门与实战 常用组件API开发技巧项目实战 小程序官方正式公告,开放了更多的入口,个人开发者可以申请

微信小程序入门与实战/常用组件/API/开发技巧/项目实战 共11章

实战开发电影资讯微信小程序 学习之前需要掌握JavaScript和CSS基础 ----------------课程目录---------------- 第1章:什么是微信小程序 开篇及课程特色介绍 直观感受一下微信小程序 小程序适合做什么样的应用 对开发者的影响 学习基础 小作业 第2章:环境搭建与开发工具 开篇介绍及下载工具 小程序目前情况及限制 小程序开发工具介绍 第3章:开始小程序之旅 本章内容简介 官方种子项目介绍与小程序的文件结构 新建我们自己的项目:ReaderMovie 开始制作项

微信小程序入门与实战 常用组件API开发技巧项目实战

第1章 什么是微信小程序?介绍小程序的特点与适用场景.对开发者的影响以及课程特色!七月老师小程序进阶课<纯正商业应用--微信小程序实战>与<微信小程序商城构建全栈应用>已上线,全面进阶小程序! 第2章 小程序环境搭建与开发工具介绍小程序开发工具的下载与安装.微信Web开发者工具主要功能简介 第3章 从一个简单的"欢迎"页面开始小程序之旅完成第一个小程序页面,并学习小程序的基本目录与文件结构,View.Image.Text组件,RPX自适应单位,Flex弹性盒子模

微信小程序入门到实战(二)

上一文章里面,我们实现了第一个小程序页面,并且了解到了一些小程序的知识,接下来继续开始我们的学习. 页面的跳转 在第一个小程序页面,预留了一个按钮,这是为了跳转到其他的页面,在微信小程序里面跳转的方法主要有下面三种: wx.navigateTo() wx.redirectTo() wx.switchTab() wx.switchTab({ url: '/index' }) 路径可得注意写对,区分绝对路径和相对路径: 绝对路径:一般在前面加上/,表示从根目录开始往下寻找 相对路径:相对于当前页面来

微信小程序入门正确姿势(一)

>>>前言 这是 [认真学编程] 系列的 第4篇 文章(微信小程序入门系列),欢迎点赞分享.写留言,这些都是对我最好的支持. 本系列适合有一定开发经验的前端Coder,新手慎入. 本文是微信小程序入门系列第一篇文章,主要有以下几点内容: 1. 教程安排 2. 小程序背景及应用场景 3. 小程序优势及局限 4. 入门必备 >>>学习安排 以上顺序可能会有变动. >>>背景 在PC互联网时代,想必大家都经历过这样的情形:时不时收到软件更新提示,等几分钟甚至

商业级支付宝小程序入门与实战

第1章 课程导学与准备工作[毕设优质项目][毕设优质项目]本章主要介绍为何学习支付宝小程序,以及开发支付宝小程序能为我们带来哪些收获.之后会为大家介绍本课程内容具体安排,最后给出如何学好这门课程的一些学习建议.希望大家都能通过这门课程,学有所成,学有所归.... 第2章 初识支付宝小程序本章首先会为大家介绍如何配置开发环境,如何使用蚂蚁开发者工具,随后我们会一起开发第一个hello world小例子,通过对开发工具以及基本文件类型的介绍,让大家快速熟悉支付宝小程序.为后面技术的学习,项目的开发做

微信小程序入门五: wxml文件引用、模版、生命周期

实例内容 wxml文件引用(include.import) 模版 小程序生命周期 实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到

微信小程序入门篇

微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教程 廖雪峰大神的博客 HTML+CSS 大概知道是干啥的就行 从零开始 微信小程序中就四种类型的文件 js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ------- 类似HTML文件 wxss ------- 类似CSS文件

天河微信小程序入门《三》:打通任督二脉,前后台互通

原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https证书后就第一时间去部署后台环境,但是发现每次访问https都要带上8443端口实在是很坑爹啊,作为一个强迫症晚期,我要做的自然是不带端口直接访问.打开你tomcat下的conf文件夹,编辑里面的server.xml <Connector port="80" protocol=&quo