微信小程序实战（1）

一，Page页面

配置约定（文件目录可以随便放置，通过配置来指定）

一个页面对应pages下一个文件目录

index目录下4大文件：

wxml：页面

wxss：样式

js：前端业务逻辑

json：配置文件

4种基本文件类型

1，在wxml中引入样式，不需要像html那样通过style标签来引入css，而只需要保证wxml文件与wxss在同一层级且文件名相同(后缀不同)即可。

全局样式

在pages同目录下的app.wxss进行定义，全局生效

(wxss、json、js）就近原则

在app.wxss中定义了全局样式，如果需要在某个页面定义特殊的样式，则可以在该页面单独定义xxx.wxss，则会展示xxx.wxss样式

project.config.json：整个项目的设置--应用级别

sitmap.json：无关紧要，需要了解可通过文件中的链接来了解

小程序默认显示app.json中pages数组中的第一行作为首页

小程序中npm命令引入包后，需要在工具-构建npm中手动触发一下

自定义组件：

1，npm下载依赖包

2，在需要用到组件的模块json文件中配置依赖组件

3，在该模块wxml中使用

新建新的页面模块调试

方法1：将app.json中pages数组添加新的页面路径，将该路径放第一位

方法2：在app.json中通过entryPagePath来指定首页

方法3：通过添加编译模式来指定首页

boolean类型的属性，如果想要表示true，可以不写值，直接写上该属性就行了

小程序最开始是只有单向数据绑定(js中的setData)，后期小程序增加了简易的双向数据绑定

生命周期：

生命周期函数也称为钩子函数，即程序启动时不用手动指定调用，而是由程序系统自动调用。

onLoad、onReady、onShow、onUnload

在js中的data定义的变量a，可通过{{a}}在wxml中来进行引用；或者通过onLoad函数中通过this.setData({a:"xxx"});然后在wxml中来进行引用；

在wxml中显示的变量最好都在data中定义一下，即使可以直接通过setData函数来定义，但为了更好的管理对象，最好展示在wxml的变量都在data定义。

dom优先：很早之前的方式

var a = document.getElementById('xxx');

a.innerHtml="aaa";

数据优先：vue、angular、react等

数据绑定

一般规定 非绑定数据 用下划线格式

js的导入、导出功能

如果封装了某个公共功能，想要让其他模块中的js来引用该公共功能时使用

导出：

方式1，modules.export={postList: local_databse}

方式2，export {

local_database

}

导入：路径只能为相对路径，不能为绝对路径

方式1，var postData=require("../../data/data.js"); 老版方式

方式2，import {local_database} from '../../data/data.js'; local_database为导出时的变量

ES6语法简写：当变量key名与value名一样时，可简写为一个即可。

如 postList:postList =》postList

全局函数app.js

onLaunch：监听小程序 启动时执行

storage 缓存 相当于前端数据库

wx.setStorageSync(key,value): 同步设置缓存值

wx.getStorageSync(key)：获取缓存值

wx.removeStorageSync(key): 删除指定缓存值

wx.clearStorageSync()：清除所有缓存值

-- 异步获取方式 回调方式

wx.getStorage({

key: xxxValue,

success(value){

console.log(value.data);

}

});

-- 异步也可以直接使用promise方式

const flag = wx.getStorage({key: value});

flag.then((value)=>{

console.log(value);

}

-- es7版本还有种最简单异步方式

方法上加await，然后await wx.getStorage 异步获取

js的动态属性

const obj = {flag: 1};

obj[attr]=true; attr可以是当前页全局变量的值，也可以是该方法的参数

showToast：一般弹框，可设置时间等

showModal：模态弹框；

wx.showModal({

title: '是否收藏文章',

success(res){//点击确定 confirm为true，否则 cancel为true

console.log(res);

}

});

showActionSheet：一般做 "分享给微信好友、分享到朋友圈"等操作，从下面拉起一个弹框