【微信小程序】微信小程序基础知识篇

开发文档

小程序简介 | 微信开放文档

1.微信小程序的环境准备

1.1注册账号

1.2获取APPID

是开发者唯一的身份认证，应用要发布要上线必须提供APPID

1.3开发工具

由于微信小程序自带开发者工具的编码体验不好，因此建议使用VS code 加微信小程序开发工具来实现编码，VS code负责敲代码，微信开发工具负责

 2.第一个微信小程序

3.微信开发者工具介绍

4.小程序结构目录

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

4.2基本的项目目录 

5.小程序配置文件

5.1全局配置 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

5.1.1tabbar 

5.2页面配置page.json

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

5.3sltemap 配置

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

例1：

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

所有页面都会被微信索引（默认情况） 

例2： 

{
  "rules":[{
    "action": "disallow",
    "page": "path/to/page"
  }]
}

 配置 path/to/page 页面不被索引，其余页面允许被索引

这里不一一举例，想看更详情的内容可以到官方文档查看 

6.模板语法

  1 text 相当于以前web中的 span标签 行内元素 不换行

  2 view 相当于以前web中的 div标签 块级元素 换行

  3 checkbox 以前的复选框标签 

6.1数据绑定

在js中

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "hello mina",
    num:10000,
    isgirl:false,
    person:{
      age:74,
      height:145,
      weight:200,
      name:"富婆"
    },
    ischecked:false
  },

})

 在wxml中

<!-- 1 字符串 -->
<view>{
  {msg}}</view>
<!-- 2 数字类型 -->
<view>{
  {num}}</view>
<!-- 3 bool类型 -->
<view>是否伪娘：{
  {isgirl}}</view>
<!-- 4 object类型 -->
<view>{
  {person.age}}</view>
<view>{
  {person.height}}</view>
<view>{
  {person.weight}}</view>
<view>{
  {person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{
  {num}}">自定义属性</view>
<!-- 6 使用bool类型充当属性 checked
     字符串和花括号之间一定不要存在空格 否则会导致识别失败，以下写法是错误示范
     <checkbox checked=" {
  {ischecked}}"></checkbox>
 -->
<view>
<checkbox checked="{
  {ischecked}}"></checkbox>
</view>

6.2运算

<!-- 7 运算 => 表达式
     1.可以在花括号中加入表达式  表达式不等于语句
     2.表达式指的是一些简单运算 数字运算 字符串拼接 逻辑运算
       1 数字的加减
       2 字符串拼接
       3 三元表达式
    3.语句
       1.复杂的代码段
          if else
          switch
          do while
          for
 -->
 <view>{
  {1+1}}</view>
 <view>{
  {'1'+'1'}}</view>
 <view>{
  {10%2===0 ? '偶数' : '奇数'}}</view>

6.3列表渲染

在js中

Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    person:{
      age:74,
      height:145,
      weight:200,
      name:"富婆"
    },
    ischecked:false,
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      },
    ]
  },

})

在wxml中

<!-- 8 列表循环 
      1.wx:for="{
  {数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
      2.wx:key="唯一的值" 用来提高列表的渲染性能
        1 wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
        2  wx:key="*this" 就是表示你的数组是一个普通数组，*this表示是循环项
        [1,2,3,44,5] ["1","22","desv"]
      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"）可以省略
 -->
<view>
  <view wx:for="{
  {list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引:{
  {index}}
    --
    值:{
  {item.name}}
  </view>
</view>
<!-- 9 对象循环
     1.wx:for="{
  {数组或者对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
     2.循环对象的时候最好把item和index的名称都修改一些
     wx:for-item="value" wx:for-index="key"
 -->
<view>
  <view>对象循环</view>
  <view wx:for="{
  {person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
    属性：{
  {key}}
    --
    值：{
  {value}}
  </view>
</view>

<!-- 10 block 当循环某些数据或者渲染某些内容的时候，如果不想额外加一层外边的标签，可以用block标签占位
      1 占位符的标签
      2 写代码的时候可以看到这标签存在
      3 页面渲染小程序会把它移除掉
 -->
<view>
    <block wx:for="{
  {list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list">
      索引:{
  {index}}
      --
      值:{
  {item.name}}
    </block>
</view>

6.4条件渲染 

<!-- 11 条件渲染
      1 wx:if="{
  {true/false}}"
        if , else , if else
        wx:if  为true直接显示1  false        false
        wx:elif               为true显示2    false
        wx:else                              显示3
      2 hidden
        1.在标签上直接加入属性hidden  隐藏
        2.hidden="{
  {true}}"   true 隐藏 ，false 显示
      3 什么场景下用哪个
        1.当标签不是频繁的切换显示优先使用wx:if,
          切换显示方式：直接把标签从页面结构移除
        2.当标签频繁的切换显示优先使用hidden，
          切换显示方式：通过添加样式来实现
          hidden属性不要和样式display 一起使用隐藏失效
 -->
 <view>
 <view>条件渲染</view>
 <view wx:if="{
  {true}}">显示</view>
 <view wx:if="{
  {false}}">隐藏</view>

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

 <vi