微信小程序-1

最新推荐文章于 2023-07-21 21:05:16 发布

gwq_622

最新推荐文章于 2023-07-21 21:05:16 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/gwq_622/article/details/100545247

版权

3、开发环境的准备

3.1 注册小程序帐号

在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。
在这里插入图片描述 注意每个邮箱仅能申请一个小程序，必须是未被未被微信开放平台注册，未被个人微信号绑定的邮箱

3.2 获取APPID

由于后期调用微信小程序的接口等功能，需要索取开发者的小程序的APPID，所以在注册成功后可登录，然后获取APPID。登录成功后看到如下界面：
在这里插入图片描述点击开发设置，然后可以看到你的APPID，可以复制保存起来

3.3 开发工具

严格来说，微信小程序支持所有的开发工具，但从效率和便利来说，推荐如下：

vs code 下载地址
微信自己的微信小程序开发工具下载地址

4、我的第一个微信小程序

下面演示如何创建第一个微信小程序应用
在这里插入图片描述
点击“详情”，微信小程序访问默认是https。

5、小程序结构目录

小程序的框架的目标是尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
小程序框架提供了自己的视图层描述语言WXHM（用于写标签）和WXSS，以及Javascript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据和逻辑。

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

结构	传统web	微信小程序
结构	HTML	WXHM
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

通过以上对比得出，传统web是三层结构。而微信小程序是四层结构。

5.2 基本的项目目录

在这里插入图片描述 app.js是小程序的入口文件
project.config.json对应右侧详情配置

6、配置介绍

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面的page.json
注意：配置文件不能出现注释

6.1 全局配置app.json

app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络初试时间、底部tab等。普通快速启动项目里边的app.json配置。

官网全局配置

6.1.1 pages

1、快捷方式：只需要在app.json的pages新增一条，即可自动创建四个页面。
在这里插入图片描述 2、pages的路径顺序，把logs放前面，首先显示的则是logs界面

6.1.2 windows

控制整个界面的表现，用于设置小程序的状态栏、导航条、标题、窗口背景色。

6.1.3 tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

"tabBar": {
    "color": "#000",
    "selectedColor":"#f23000",
    "backgroundColor":"#f7f7f7",
    "borderStyle":"black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/index.png",
      "selectedIconPath": "icons/index-active.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "icons/log.png",
      "selectedIconPath": "icons/log-active.png"
    }
    ]
  },

在这里插入图片描述

6.2 页面配置page.json

这里的page.json其实用来表示页面目录下的page.json这类小程序页面的相关配置。
开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。
页面的配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json和window中相同的样式

7、视图层

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

7.1数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

7.1.1简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

 /**
   * 页面的初始数据
   */
  data: {
    msg:'hello word 1',
    num: 1000,
    isBoy:true,
    person:{
      name:"小红",
      height:150
    }
  },

如何获取以上变量参数值：

<view>
  hello word || {{msg}} 
  <view>num:{{num}}</view>
  <view>isBoy:{{isBoy}}</view>
  <view>person.name:{{person.name}}---person.height:{{person.height}}</view>
</view>

7.1.2 组件属性(需要在双引号之内)

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

 <view data-id="{{id}}">title</view>

查看调试器，点击wxml
在这里插入图片描述

7.1.3 控制属性(需要在双引号之内)

Page({
  isBoy:true
})

<view wx:if="{{isBoy}}">是个男孩</view>

7.1.4 boolean类型

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

效果图：

在这里插入图片描述
特别注意：不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

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
  }
})

view中的内容为 3 + 3 + d。

7.2.3 逻辑判断

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

注意：引号和花括号之间不能有空格
在这里插入图片描述

7.3 列表渲染

7.3.1 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>

7.3.2 block wx:for

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

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

7.3.2 wx:key

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

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

示例代码：

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

注意：

当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

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

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

8.WXSS

wxss(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式。
与CSS相比，WXSS扩展性的特性有：

尺寸单位
样式导入

8.1 尺寸单位

官网介绍
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

8.2 样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

注意，在WXSS注释不能使用//，只能用//**

8.3 内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

8.4 选择器

8.3 全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

9.基本组件

小程序提供了常用的标签组件用于构建页面
组件

9.1 view

9.2 text

显示普通的文本 text只能嵌套text

9.3 image

image组件默认宽度320px、高度240px
注意：该标签其实是web中图片标签和背景图片的结合！！！并且不支持以前web中的背景图片的写法！！

9.4 swiper

微信内置有轮播图组件
默认宽度100% 高度150px

9.4.1 swiper

滑块视图容器

9.4.2 swiper-item

默认宽度高度都是100%

9.5 navigator

9.6 video

10.自定义组件

自定义组件

10.1 创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

gwq_622

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信小程序-1

3、开发环境的准备3.1 注册小程序帐号在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。注意每个邮箱仅能申请一个小程序，必须是未被未被微信开放平台注册，未被个人微信号绑定的邮箱3.2 获取APPID由于后期调用微信小程序的接口等功能，需要索取开发者的小程序的APPID，所以在注册成功后可登录，然后获取APPID。登录成功后看到如下界面：点击开发设...
复制链接

扫一扫