微信小程序学习从0到1

学习微信小程序之前需要明白以下三点

1. 小程序运行在微信环境中

2. 小程序可以调用微信提供的各种API（地理定位，扫码，支付）

3. 小程序开发模式（申请开发账号+安装小程序开发工具+创建和配置小程序项目）

在https://mp.weixin.qq.com申请开发账号，搞到自己的APPID，然后安装微信开发者工具

---

第一天学习：

• 创建第一个小程序
• 小程序项目的基本组成结构

1. pages存放所有小程序页面
2. utils存放工具性质的模块
3. app.js入口文件
4. app.json全局配置文件
5. app.wxss全局样式文件
6. project.config.json项目配置文件
7. sitemap.json配置小程序及其页面是否允许被微信索引 

app.json文件（页面配置会覆盖全局配置）

1. pages：当前小程序所有页面的路径
2. window：当前小程序所有页面的背景色，文字颜色等
3. style：小程序组件样式版本
4. sitemapLocation：指明sitemap.json的位置

project.config.json文件（"checkSiteMap": false）

1. setting：保存了编译相关的配置
2. projectname：保存项目名称
3. appid：保存小程序的账号ID

新建小程序页面（app.json->pages）

修改项目首页（调整app.json/pages顺序） 

WXML有什么特点（类似HTML）

标签：view，text，image，navigator

WXSS有什么特点（类似CSS）

rpx尺寸单位，全局样式和局部样式

小程序中.js文件的分类

1. app.js小程序入口文件，启动小程序
2. 页面的js文件，调用page（）函数创建并运行页面
3. 普通的js文件，封装公共函数或属性供给页面使用

宿主环境（程序运行所必须的依赖环境）

手机微信是小程序的宿主环境

1. 通信模型
2. 运行机制
3. 组件
4. API

通信的主体（渲染层和逻辑层）

1. WXML和WXSS是在渲染层

2. JS脚本在逻辑层

通信模型两部分（渲染层和逻辑层之间的通信，逻辑层和第三方服务器之间的通信）

小程序启动的过程

1. 把小程序代码包下载到本地
2. 解析app.json
3. 执行app.js
4. 渲染首页
5. 小程序启动完成

页面渲染过程

1. 加载解析页面的.json
2. 加载页面的.wxml和.wxss
3. 执行页面的.js
4. 页面渲染完成

小程序组件的分类

1. 视图容器（view，scroll-view，swiper，swiper-item）
2. 基础内容（text，rich-text）
3. 其他常用组件（button，image，navigator）
4. 表单组件
5. 导航组件
6. map地图组件

 

 

/* pages/list/list.wxss */
.container1 view {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1){
    background-color: lightgreen;
}
.container1 view:nth-child(2){
    background-color: lightskyblue;
}
.container1 view:nth-child(3){
    background-color: lightpink;
}

.container1 {
    display: flex;
    justify-content: space-around;
}
.container2 {
    border: 1px solid red;
    height: 100px;
    width: 100%;
   
    
}
.container2 view {
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
}
.container2 view:nth-child(1){
    background-color: lightgreen;
}
.container2 view:nth-child(2){
    background-color: lightskyblue;
}
.container2 view:nth-child(3){
    background-color: lightpink;
}
.swiper-container {
    height: 150px;
}
.item{
    height: 100%;
    line-height: 150px;
    text-align: center;
}
swiper-item:nth-child(1) .item{
    background-color: lightseagreen;
}
swiper-item:nth-child(2) .item{
    background-color: lightsalmon;
}
swiper-item:nth-child(3) .item{
    background-color: lightgray;
}

 

小程序API分类

1. 事件监听API（以on开头，监听事件的触发）
2. 同步API（以Sync结尾，通过函数返回值直接获取执行结果，执行错误抛异常）
3. 异步API （需要通过success,fail,complete接收调用结果）

---

第二天学习：

WXML模板语法-数据绑定（数据绑定，动态绑定属性，数值运算，wx:if , wx:for）

Page({

    /**
     * 页面的初始数据
     */
    data: {
        info: 'hello world',
        imgSrc: 'http://www.itheima.com/images/logo.png',
        randomNum1: Math.random() * 10,
        randomNum2: Math.random().toFixed(2)


    }
}）

{{info}}

{{randomNum1 >= 5 ? '数字大于或等于5' : '数字小于5'}}
{{randomNum2 * 100}}

 WXML模板语法-事件绑定

事件是渲染层到逻辑层的通信方式（tap事件，input事件，change事件）

Page({

    /**
     * 页面的初始数据
     */
   data: {
        
        count: 0

    },
    btnTapHandler(e){
        console.log(e)
    },
    changeCount(){
        this.setData({
            count: this.data.count + 1
        })
    },
    btnTap2(e) {
        this.setData({
            count: this.data.count + e.target.dataset.info
        })
    }
}）



按钮
{{count}}
{{count}}

全局配置window导航栏