项目基本结构

json配置文件

关闭索引指示,“checkSiteMap” : false

页面内的配置优先级最高

app.json内page里的顺序可调换,默认第一个page为首页

WXML

类似于网页开发中的HTML

WXSS

类似于CSS

JS逻辑交互

.js文件通过此文件处理与用户的交互

宿主环境

小程序宿主环境包含的内容

通信模型

运行机制

组件

视图容器类类组件

view组件

scroll-view组件

swiper(-item)组件

常用的内容基础组件

text

文本组件
类似于html内的span标签,行内元素

rich-text

富文本组件
支持吧html字符串渲染为WXML结构

<view>
    这是一段文字
    <text user-select>10099090</text>
</view>
 
<rich-text nodes="<h1 style='color: red; text-align: center;'>标题</h1>"></rich-text>

其他常用组件

button

image

7--

navigator(后续专门讲解)

API

协同工作

发布

step01

WXML

Mustache语法

动态绑定

可用调试器里的AppData查看data数据

事件绑定

新版小程序input为单标签即:<input bindinput="inputHandler"/>

条件渲染

列表渲染

WXSS

样式导入

全局配置

window

tabBar

"tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "登陆界面",
        "iconPath": "/image/tabs/home.png",
        "selectedIconPath": "/image/tabs/home-active.png"
    },
    {
        "pagePath": "pages/list/list",
        "text": "测试页面",
        "iconPath": "/image/tabs/message.png",
        "selectedIconPath": "/image/tabs/message-active.png"
    }
]
},

页面配置

配置sass

sitemap.json

网络数据请求

API

本地存储

实例

总结

step02

页面导航

声明式编程

navigate可不写(非tabBar页面)

后退一个页面时 delta=1 可省略

导航式编程

导航传参

页面事件

下拉刷新

调用wx.stopPullDownRefresh()方法手动关闭刷新

上拉触底

生命周期

WXS

小程序独有的一套脚本语言,结合WXML,可以构建出页面的结构

特点

实例(列表页面)

API接口

坑:

地址url里有参数时使用反引号“
<view class=“shop-item” wx:for=“{{shopList}}” wx:key=“id”> 里的wx.for 使用的是{{shopList}} 并且注意参数的大小写
class写成calss没绷住
images : 少写s 容易写成iamge
success: (res)⇒{}
wx.hideloading 放在wx.request里的最后面
截流效果:先声明锁,再在getlist函数中使用锁,最后在rreachBottom函数中使用截流阀