小程序的基础

Posted 2021-06-29 stay_少年与梦

小程序基础

一.小程序的结构目录是什么?

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服 务。⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

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

结构	传统web	微信⼩程序
结构	html	WXML
样式	CSS	WXSS
逻辑	javascript	Javascript
配置	⽆	JSON

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

基本的项目目录

小程序配置文件

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

全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

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

字段的含义

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
3. 完整的配置信息请参考 app.json配置

⻚⾯配置page.json

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。
开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。
⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json的 window 中相同的配置项。

模板语法

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

1. 数据绑定

普通写法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
 }
})

组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
 }
})

boolean类型

不要直接写check=“false”，其计算结果是⼀个字符串

<checkbox checked="{{false}}"> </checkbox>

运算

1.三元运算

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

2.算数运算

html代码

<view> {{a + b}} + {{c}} + d </view>

js代码

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

3.逻辑判断

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

4.字符串运算

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

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

注意

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

列表渲染

1.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'
   }]
 }
})

2.block

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

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

总结

今天我们主要讲了小程序的结构目录，它的一些基础语法
它的配置文件。

小程序简单让开发者可以在微信中开发具有原⽣APP体验的服务。