微信小程序开发基础

た入场券 2022-10-07 00:52 237阅读 0赞

### 文章目录 ###

*  基础
 *   *  新建项目
     *  配置文件
     *   *  全局配置 app.json
         *  ⻚⾯配置 page.json
         *  tabBar
 *  基本语法
 *   *  数据绑定
     *  变量和运算
     *  渲染
     *  事件绑定

# 基础 #

## 新建项目 ##

首先要在微信公众平台注册账号，然后获取AppID

打开微信开发者工具>选择小程序>点击新建>选择路径、填写项目信息>建立项目

## 配置文件 ##

> ⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的  
> page.json  
> 注意：配置文件中不能出现注释

### 全局配置 app.json ###

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

1.  pages 字段：⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序

⻚⾯定义在哪个⽬录。

1.  window 字段：定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

### ⻚⾯配置 page.json ###

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。

⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json的 window 中相同的配置项。

{
        
      "usingComponents": {
        }
    }

### tabBar ###

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

![img][]

tabBar写在app.json中。在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

{
        
      "pages"[
        "pages/index/index",
      ],
    
      "tabBar": {
        
        "custom": true,
        "color": "#000000",
        "selectedColor": "#000000",
        "backgroundColor": "#000000",
        "list": [{
        
          "pagePath": "pages/index/index",
          "iconPath": "images/invite.png",
          "selectedIconPath": "images/invite.png",
          "text": "XX"
        }, {
        
          "pagePath": "pages/01/index",
          "iconPath": "images/invite.png",
          "selectedIconPath": "images/invite.png",
          "text": "XX"
        }]
      },
      "usingComponents": {
        }
    }

> “color”: 未选择时，底部导航的文字颜色  
> “selectedColor”: 选中时，底部导航的文字颜色  
> “backgroundColor”: 底部导航背景颜色  
> “list”：导航配置数组

> “pagePath”: 页面访问地址  
> “iconPath”: 未选择时，图片路径  
> “selectedIconPath”: 选中时，图片路径  
> “text”: 标题

注：list数组的第一个元素要设置为"pages"的第一个元素（首页）

# 基本语法 #

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

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。 与 CSS 相⽐，WXSS 扩展的特性有： 响应式⻓度单位 rpx和样式导⼊ 。

## 数据绑定 ##

数据绑定：视觉层数据与逻辑层数据通信的方法，也就是将一个用户界面元素的属性绑定到一个逻辑文件的对象实例上的某个属性的方法。在用户与视觉界面进行交互时，视觉界面数据改变，由视觉界面传递至逻辑层面更改数据（如输入框输入数据）。相反，当逻辑层数据更改后，也会即使更改视觉层数据（如网络数据的获取和展示）。数据绑定使用一种叫做Mustache语法的形式，是将属性变量用双层花括号（\{ \{\}\}）括起来的形式进行绑定，可以作用于内容、组件属性、控制属性、关键字的绑定。

wxml文件

js文件

Page({
        
      data: {
        
        text: 'Hello World!',
        id: 0
     }
    })

## 变量和运算 ##

局部页面上的所有数据，都源于js内的data对象。

在方法内，可以直接使用this.setData()定义变量并赋值，只有这样定义的变量能在整个页面内使用。

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

三元运算

算数运算

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

逻辑判断

字符串运算

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

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

## 渲染 ##

**列表渲染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'
       }]
     }
    })

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

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

**条件渲染wx:if**

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

类似 `wx:if`频繁切换 ⽤ `hidden`

## 事件绑定 ##

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等 。不同的组件⽀持不同的事件，具体看组件的说明即可。

Page({
        
      //页面的初始数据
      data: {
        
    
      },
        
      // 绑定的事件
        onClick: function (e) {
        
        console.log("botton tap事件被触发");
        console.log(e);
      }
    })

[img]: /images/20221005/a473eb3378744eccbb453988870b5cc0.png