微信小程序学习笔记01

由于需求，熟悉了一下微信小程序开发，作了些许学习笔记，记录下来了，视频参考：json

https://www.bilibili.com/video/av40455083/?p=10小程序

1.模块认识

（1）模拟器，调试效果展现
（2）文件，编辑器
（3）业务逻辑
（4）下面是调试器，相似于谷歌中的调试台
（5）菜单栏windows

2.框架：

视图层：结构WXML+样式WXSS+逻辑层JS+配置JSON
传统的：HTML+CSS+JS
最原始结构:
pages文件夹:页面index首页+logs日志
    index：js+wxml+wxss
    logs:js+wxml+wxss+json
utils：公共代码片断
app.js  小程序入口文件
app.json 小程序公共默认设置（标题）
app.wxss 提供全局样式
pro.con.json 详情里面的内容，可手动实现微信小程序

3.配置文件介绍：

3.1全局全局配置文件app.json

    pages:小程序拥有的页面和路径
        新增一个界面：点开app.json
        新增长一个字段，系统会帮助咱们建立
        规律：哪一个页面在最上面，最开始启动的时候会优先选择哪个界面
        
    windows：用于设置小程序
    状态栏、导航条、标题、窗口背景色微信

•         navigationBarTitleText全局标题
•         "navigationBarBackgroundColor": "#0094ff",导航栏背景颜色设置
•         "navigationBarTextStyle":"black"导航栏字体颜色
•         enablepulldownrefresh:true:容许下拉刷新
•         backgroundtextstyle:dark 下拉背景颜色黑色
•         ....

    tabBar 下面的导航栏app

•         list中至少有两个菜单栏
•             包含pagepath和text等
•         color和list同级别的颜色
•         selectedColor:(十六进制)
•         backgroundColor背景颜色
•         borderstyle边框颜色
•         position定位

    json文件不要乱添加一些没必要要的注释
    框架

3.2页面配置 page.json

相似app.json中的windows配置，直接在{}中写
    {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#ffff00",
    "navigationBarTitleText": "index2 首页2",
    "navigationBarTextStyle": "black"
    }xss

4.视图层WXML（相似于HTML）

标签语言
基础组件+事件系统（函数）
注释：<!--   -->编辑器

4.1 数据绑定

<text>文本标签（行内相似span）ide

<view>至关于<div>

4.2 js控制变量<view></view>

JS中
data: {
    msg:"HelloWorld"
    //也能够绑定一个对象
    person：{
        name:小明，
        age:15
    }
  },
  
WXML中
<view>
{{msg}}
<view>{{person.name}}--{{person.age}}</view>
<view>

MXML所有代码展现：
<!--pages/index3/index3.wxml-->
<text>pages/index3/index3.wxml</text>
<view>
Hello World
<view>这个数字是：{{num}}</view>
这我的的信息是：{{person.name}}=={{person.age}}
</view>

JS相关代码展现：
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:15,
    person:{
      name:"xiaohong",
      age:20
    }
  },

4.3 利用组件属性展现

js中在page中定义变量：
title:"这个是个新的页面index3"

WXML中调用title变量 ：
<view data-id="{{title}}">title</view>

4.4 关于布尔变量的一个坑

<checkbox check="{{true}}"></checkbox>
属性true仍是false外面都要加上两个大括号

5.关于运算

5.1 三元运算

WXML中:
<view hidden="{{flag?true:false}}">hidden</view>

jS中pages里面设置变量：
hidden：false

5.2 加减乘除

WXML中：
<view>
    {{1+10}}    显示11
    {{num1+num2}}   15
    {{str1+str2}}拼接字符串
</view>

JS中:
num1=10,num2=5
str1="Hello",str2="World"

5.3 逻辑判断

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

<view>
<checkbox checked="{{num3>=20}}">
<checkbox>
</view>

js中：
num3=21

5.4 注意：

花括号和引号之间若是有空格，将最终被解析成为字符串
checked=" {{num3>=20}}" 一个完整的字符串为true

未完待续！！！

撒花✿✿ヽ(°▽°)ノ✿！！！