My first wechat app

小程序目录

• My first wechat app
• • 一、微信小程序
  • • 1.1 微信小程序历史
    • 1.2 环境准备
    • • 1.2.1 注册账号
      • 1.2.2 获取APPID
      • 1.2.3 微信开发者工具下载地址
      • 1.2.4 创建项目
      • 1.2.5 微信开发者工具介绍
  • 二、小程序结构
  • • 2.1 文件结构和web结构对比
    • • 2.1.1 小程序基本配置目录
      • • 2.1.1.1 新建页面
        • 2.1.1.2 window字段介绍
        • 2.1.1.3 tabBar字段介绍
      • 2.1.2 页面配置
      • 2.1.3 小程序配置文件
      • • 2.1.3.1 sitemap配置(了解)
    • 三、模板语法
    • • 3.1数据绑定
      • 3.2 运算
      • • 3.2.1 运算符
      • 3.3 列表渲染
      • • 3.3.1 wx:for
        • 3.3.2 block
      • 3.4 条件渲染
      • 4.1 小程序事件的绑定

一、微信小程序

1.1 微信小程序历史

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

1.2 环境准备

1.2.1 注册账号

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

1.2.2 获取APPID

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdhpZTKQ-1609125711566)(C:\Users\20140\Desktop\QQ截图20201228104632.png)]

1.2.3 微信开发者工具下载地址

下载地址

1.2.4 创建项目

1.2.5 微信开发者工具介绍

二、小程序结构

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

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

2.1 文件结构和web结构对比

2.1.1 小程序基本配置目录

1. pages 字段——用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.
2. window字段——定义小程序所有页面的顶部背景颜色，文字颜色定义等。

2.1.1.1 新建页面

在app.json中找到pages新增页面即可

可调整顺序 保存之后即可新建页面

2.1.1.2 window字段介绍

"backgroundTextStyle":"dark"    --下拉刷新小圆点颜色 只支持light和dark
"navigationBarBackgroundColor": "#0094FF",  --设置导航栏颜色
"navigationBarTitleText": "我的应用",	--设置导航栏简介
"navigationBarTextStyle":"white"	 --设置导航栏文字颜色（只支持黑白）
"enablePullDownRefresh": true    --刷新功能 默认为false
"backgroundColor": "#eee"			--下拉刷新框的背景色

2.1.1.3 tabBar字段介绍

简记：底部导航

"pagePath": "pagePath",    --页面路径（要跳转的页面）
"text": "text",				--标题 底部导航的字
"iconPath": "iconPath",		--未选中状态的图标
"selectedIconPath": "selectedIconPath" 		--选中状态的图标

与“list"同级的常用属性

"color": "#0094ff",    --未选中字体颜色
"selectedColor": "#ff9400",    --选中字体颜色  只支持16进制颜色
"backgroundColor": "#ff5533",    --背景颜色
"position": "top"	--导航在上还是在下 如果在上 图标不展示

2.1.2 页面配置

作用：

1. 能够修改页面导航栏外观
2. 能够修改自定义属性
3. 修改上拉 下拉菜单外观属性

页面配置很简单：

只需要吧需要的属性从window字段中复制到你需要修改的文件夹下的json文件中即可

2.1.3 小程序配置文件

2.1.3.1 sitemap配置(了解)

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

三、模板语法

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

3.1数据绑定

<text>hello worldtext>
<view>我是demo3view>

代码示例：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "hello world",
    number: 999,
    isgirl: false,
    person: {
      age: 18,
      name: '崔云飞',
      height: 180
    },
    ischecked:true
  },
})

 {{msg}} 

 {{number}} 

{{isgirl}}

{{person.name}}
{{person.age}}
{{person.height}}

自定义属性


  

3.2 运算

3.2.1 运算符

 <view>{{1+1}}view>
 <view>{{'1'+'1'}}view>
 <view>{{11%2==0 ? '偶数' : '奇数'}}view>

3.3 列表渲染

3.3.1 wx:for

<!-- 
   8 列表循环
      1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
      2 wx:key="唯一的值" 用来提高列表渲染的性能
          1 wx:key 绑定一个蒲婷的字符串的时候 那么这个字符串名称 肯定是 循环数组中的 对象的 唯一属性
          2 wx:key ="*this" 就表示 你的数组 是一个普通数组 *this 表示是 循环箱
              [1,2,3,4,5]
              ["1","23","aseff"]
      3 当出现 数组的嵌套循环 尤其要注意 以下绑定的名称 不要重名
          wx:for-item="item" wx:for-index="index"
      4 默认情况下 不写
      wx:for-item="item" wx:for-index="index"
      小程序也会把 循环项的名称和索引的名称 item 和index
      只有一层循环的话 (wx:for-item="item" wx:for-index="index") 可以省略
    9 对象循环
      1 wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
      为了方便记忆 以及语义化
      2 wx:for-item="value" wx:for-index="key"

  -->

例子：

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index"  wx:key="id">
      索引：{{index}} -- 值{{item.name}},{{item.age}}
  </view>
-------分割线-------
  <view wx:for="{{list}}" wx:key="id">
      索引：{{index}} -- 值{{item.name}},{{item.age}}
  </view>
  -------------分割线-------
  <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
      键:{{key}} -- 值：{{value}}
  </view>

我们可以看到：

3.3.2 block

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

作用：

1 占位符标签

2 写代码的时候 可以看到标签存在

3 页面渲染时 小程序会把他移除

示例：

3.4 条件渲染

{true/false}}"
        1 if elif else
          wx:if 
          wx:elif 
          wx:else
      2 hidden 隐藏
        1 在标签上直接加入属性hidden
        2 hidden="{{true}}"
      3 什么场景下用哪个
        1 当标签不频繁切换显示 使用 wx:if
          直接删除标签
        2 当标签频繁切换显示 使用 hidden
          通过添加样式的方式切换
        不能和display一起使用
 -->

代码示例：

<view>
  <view>----------条件渲染----------view>
  <view wx:if="{{true}}">显示view>
  <view wx:if="{{false}}">隐藏view>

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

  <view hidden>我会被隐藏view>
  <view hidden="{{false}}">我会显示view>

  <view hidden style="display:flex;">设置display之后会隐藏吗view>
view>

4.1 小程序事件的绑定

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

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

代码示例：

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

Page({
  data: {
    num:0
  },
  // 输入框中的input输入框执行逻辑
  handleInput(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  // 加减按钮的事件
  handletap(e){
    // console.log(e)
    //  获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num+ operation
    })
  }
})