小程序编辑

建设你的第一个小程序

一. 认识全局配置文件

全局配置文件主要负责调整小程序的主要界面样式，并设计多页面。

01. pages字段

在pages字段中新建一个新的命名文档将作为一个全新的界面存在。

02. window字段

选择utils中的app.json，打开其中的代码界面。
其中的pages将能直接新建全新的文件（界面）。window下的代码命令可以对主页程序名称，颜色等进行编辑。
例如

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#43C6AC",
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#eeeeee",
    "enablePullDownRefresh":true

03. tabber字段

建立底部菜单栏
注意

• tabber应在window的紫色括号后建立。
• 菜单栏的图标应当>=2
• 多个图标建立应在list后添加
  如图
  

04. 页面配置文件

负责配置app.json中的window配置项

05. sitmap配置

在utils中的sitmap.json中

06. 模板语法

• 单个文件下的.wxml中编辑
• <>text 可以实现不换行文本编辑
• <>view 可以实现换行文本编辑
• <>checkbook 是复选框（打勾）
  数据绑定
• 单个文件下的.js
• 页面中的所有数值都应该在date下

运算

• 可以在花括号中 加入 表达式“语句”
• 可以实现 数字的加减 字符串的拼接 三元表达式
• 复杂的代码段
  列表循环
• wx：for=“{{数组或对象}}” wx：for-item=“循环项的名称” wx:for-index“循环项的索引”
• wx：key=“唯一的值” 用来提高列表渲染的性能
• wx：key绑定一个普通的字符串时，那么这个字符串名称 肯定时 循环数组 中的 对象的 唯一属性
• wx：可以=“*this” 就表示你 的数组是个普通的数组 *this 表示的时 循环项 [1，2，3，]
• block 占位符的标签
• 写代码的时候可以看见
• 程序启动后不会显示
  条件渲染
• 显示或隐藏内容
• wx：if=“{{true/false}}” 可以动态显示文本
• wx:elif wx：else 三者之间按照优先级顺序显示
• 添加hidden 标签上直接添加 可以隐藏内容
• hidden=“{{true}}”

1. 当标签不是频繁的切换显示，优先使用 wx：if
2. 当标签不是频繁的切换显示，优先使用 hidden
3. if 将内容直接从页面结构中删除
4. hid 通过添加样式的方式切换显示

07. 事件绑定

单个文件下的js，wxml

实现目标
通过简单命令 使得达到 通过加减按钮使得输入框内的数值加减 且 存在一个输入框，输入数值后能在另一个框内直接显示 并赋值给后台

• input事件 绑定关键字 bindinput

//单个文件下的.wxml 配制
<input type="text" bindinput="handleInput"/>
<view>
{{num}}
<view>

//js中为
Page({
  data:{
       num:0
   },
   handleInput(e){
        console.log("e.detail.value")
    }
})

通过事件源对象来获取绑定后的变化数值

赋值num
this.setData({
num:e.detail.value
})
加减按钮

//wxml文件
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{1}}">-</button>
<view>{{num}}<view>

加入一个点击事件
无法在小程序当中的 事件中 直接加参
通过自定义属性的方式传递参数
事件源中获取 自定义属性
bindtap

//js 文件
handletap(e){
console.log(e),
const aperation=e.currentTarget.dataset.operation;
num: this.data.num+operation

}

08. 样式wxss

wxss
view{
 //width:200px;
  height:200px;
  font-size:40px;
  background-color:
 width:calc(750rpx*100/375);
  }

利用calc 属性来适配
750和rpx中不要留空格
运算符两边不要留空格

未完待续