小程序0基础到精通一（语法部分）

一、创建小程序项目（自行百度很简单）

二、小程序项目初始文件

pages 页面
--index页面
---index.js业务逻辑
---indx.json页面配置
---index.wxml 页面模板
---index.wxss 页面样式
--logs 日志
utils工具
--utils.js 工具方法
.eslintrc.js js语法检测
app.js 小程序的根业务逻辑
app.json 小程序的配置
app.wxss 小程序全局样式
project.config.json 项目配置
project.private.config.js 项目私有配置
sitemap.json 站点地图

三、配置

1.全局配置app.json

pages：存放页面的路径 首页就是第一个路径
window：窗口信息
背景颜色
--"backgroundTextStyle":"light"
导航栏背景颜色
--"navigationBarBackgroundColor":"#f30",
导航栏标题
--"navigationBarTitleStyle":"骑着扭扭车到拉萨",
导航栏文本颜色
--"navigationBarTextStyle":"white"|black

2.页面配置 页面.json

与app.json window相同 但是配置只对当前页面启用
会覆盖全局配置 可实现单独页面的样式更改

四、页面结构

xx.js 业务逻辑
xx.json 页面的配置
xx.wxml 页面的模板
xx.wxss 页面的样式

五、wxss的单位

小程序单位 rpx
750rpx 一个屏幕的宽 根据不同手机型号可以动态变化宽度

六、条件编译

帮助切换小程序的默认启动页面(首页)

七、基础组件

view 容器
text 文本
更多可以 鼠标悬停在组件标签上 显示文档 点击查看学习

八、不校验合法域名

工具栏->详情->本地设置-> 勾选不校验

九、渲染指令

1.文本渲染指令 {{}}

//wxml部分
<view class="title">文本渲染</view>
<view>{{msg}}</view>
<view>{{2+3}}</view>
<view>{{1>2? '已经抵达拉萨':'还在路上'}}</view>

//js data部分
data: {
    msg:'骑扭扭车到拉萨',
  },

2.条件渲染指令

2.1 wx:if="{{}}"

//wxml部分
<view class="title">条件渲染</view>
<view wx:if="{{isLog}}">欢迎抵达拉萨</view>

//js部分
data: {
    isLog:true,
  },

效果展示

2.2 wx:else

//wxml部分
<view class="title">条件渲染</view>
<view wx:if="{{isLog}}">欢迎抵达拉萨</view>
<view wx:else>还在拉萨的路上</view>

//js部分
data: {
    isLog:true,
  },

效果同上 当isLog的值为false时 显示 还在拉萨的路上

2.3 wx:elif="{{}}"

//wxml部分
<view class="title">多重条件渲染</view>
<view wx:if="{{score>=90}}">驾驶飞机去拉萨</view>
<view wx:elif="{{score>=80}}">驾驶高铁去拉萨</view>
<view wx:elif="{{score>=70}}">驾驶汽车去拉萨</view>
<view wx:else>驾驶山地车去拉萨</view>

//js部分
data: {
    score:true,
  },

效果展示

根据不同的score的值更改显示的文字 多重条件渲染

此时显示为

3.遍历

3.1遍历

对象，数组，数字，字符串都可以被遍历

3.2 wx:for="{{list}}"（遍历list数组）

//wxml部分
<view class="title">列表渲染</view>
<view wx:for="{{list}}" wx:key="index">{{index+1}}-{{item}}</view>
<view>
//文字遍历
<view class="title">文字循环</view>
<view wx:for="{{msg}}" wx:key="index">{{index+1}}-{{item}}</view>
</view>
<view>
<view class="title">数字循环</view>
  <view wx:for="{{5}}" wx:key="index">{{index+1}}-{{item+1}}</view>
</view>

 //js部分
data: {
    msg:'骑扭扭车到拉萨',
    list:['拉萨','武汉','上海']
  },

代码特别说明：遍历需要指定wx:key="index"（key值）index 遍历元素的下标 item代表变量的元素

效果展示

3.3自定义item与index(多重遍历)

//wxml部分
<view class="title">
  自定义列表渲染
</view>
<view wx:for="{{list}}" wx:for-index="ind" wx:for-item="myitem" wx:key="ind">
  {{ind+1}}-{{myitem}}
</view>
<view>
    //自带 item 和 index
  <view wx:for="{{arr}}" wx:key="index">
    <view wx:for="{{item}}" wx:for-item="sub" wx:for-index="subind" wx:key="subind"> 
      {{subind}} - {{sub}}
    </view>
    <view>
      ........................
    </view>
  </view>
</view>

//js部分
data: {
    list:['拉萨','武汉','上海'],
    arr:[[15,16,17],[18,19,20],[32,32]]
  },

效果展示

4.include导入

4.1定义templates文件夹 在创建文件footer.wxml

4.2代码部分

//footer.wxml
<view>
  @2023年小海骑车去拉萨
</view>

//home.wxml include导入 显示
<view class="title">
  include导入
</view>
<include src="../../templates/footer"></include>
<include src="../../templates/footer"></include>

效果展示

5.import导入

5.1义templates文件夹 在创建文件userCard.wxml

5.2代码部分

//userCard.wxml部分
<template name="user">
<view>
  <view>
    用户名：文小海
  </view>
  <view>
    年龄：23
  </view>
</view>
</template>

//home.wxml import导入 显示
<view class="title">
  import 导入功能
</view>
<import src="../../templates/userCart"></import>
<template is="user"></template>

效果展示

6.import导入 传值

6.1定义一个数据

data: {
    ulist:[
      {name:"小小海",age:6},
      {name:"小海",age:18}
    ]
  },

6.2代码部分

//home.wxml部分
<view class="title">
  import 导入功能
</view>
<import src="../../templates/userCart"></import>
<template is="user" data="{{...ulist[0]}}"></template>
<template is="user" data="{{...ulist[1]}}"></template>

//userCard部分
<template name="user">
<view>
  <view>
    用户名：{{name}}
  </view>
  <view>
    年龄：{{age}}
  </view>
</view>
</template>

效果展示

7.include和import对比

1.include是直接把内容拷贝，不能拷贝template模板，也不能递归拷贝
2.import 能导入template 也能递归导入
3.import 导入后 采用<template is="指定的名称"></template>
4.二者使用都很少 了解即可

十、事件

1.事件响应：

1.1

被点击：bindtap = "函数名"
表单发生变化：bindinout=""函数名"
确认键：bindconfirm=""函数名"
长按：bindlongPress=""函数名"

2.实现传参

2.1wxml部分

<view data-msg="参数" bindtap="inputHa">
//例子
<button type="primary" bindtap="sayHi" data-msg="我好中意你呀！">黑凤梨</button>

2.2js部分

sayHi(e){
 // e.target.dataset.hi 获取 data传参
 // 传参 wx.showModal 弹框
  wx.showModal({
  title:e.target.dataset.hi
    })
}

效果展示：

3.表单的双向绑定

3.1wxml部分

<view class="title">表单的双向绑定</view>
<view>{{msg}}</view>
<input value="{{msg}}" bindinput="inputHd"/>

3.2js部分

data: {
    msg:"拉萨"
},
inputHd(e){
  // 在小程序更新数据 e.detail.value 表单的值
  this.setData({msg:e.detail.value})
},

效果展示：

未输入状态：

输入状态：