微信小程序-npm与数据共享
使用npm小程序使用npm有一些限制：1、不支持依赖于nodejs内置库的包2、不支持依赖于浏览器内置对象的包3、不支持依赖于C++插件的包
Vant Weapp有赞前端团队开源的小程序UI组件库，使用MIT开源许可协议。1、npm i @vant/weapp -S –production2、将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。3、开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
12345678910111213{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ ...
微信小程序-组件通信
插槽在自定义组件中可以使用<slot>节点，用于承载组件使用者提供的wxml结构
默认插槽自定义组件.wxml：
1234<view><view>默认插槽：</view><view><slot></slot></view></view>
父组件.wxml：
123<test1><text>你好</text></test1>
具名插槽1、插槽默认不支持多个，如果想有多个插槽需要在自定义组件Component配置对象的options属性中配置”multipleSlots”:true。2、自定义组件的<slot>标签指定name。3、组件使用者通过slot属性，选择插入内容对应的插槽。（与vue不同，不用包在template中）自定义组件.js:
12345Component({ options:{ multipleSlots:true }})
自定义组件.wxml:
1234 ...
微信小程序-自定义组件
组件基本使用创建组件1、在项目的根目录下创建components文件夹，在components文件中定义所有自定义组件。2、右键点击“新建Component”3、输入组件名称之后回车，会生成4个文件：.js、.json、.wxml、.wxss
引用组件局部引用1、在需要使用组件的页面.json配置文件中的”usingComponents”节点中声明要引入的组件
123"usingComponents": { "test1":"/components/test1/test1" }
全局引用组件在app.json中和window节点平级声明”usingComponents”节点，该节点以对象的形式呈现，内部写法同上。
123"usingComponents": { "test1":"/components/test1/test1" }
组件和页面的区别1、组件的.json文件中需要声明”component”:tr ...
微信小程序-WXS脚本
WXSWXS相当于VUE的过滤器WXS语法类似JavaScript，但是两个不是一种语言1、wxs有自己的数据类型2、wxs不支持ES6及以上的语法3、wxs遵循CommonJS规范
内嵌WXS编写在wxml文件中的<wxs>标签，必须提供module属性，指定当前wxs的模块名称，方便在wxml中访问模块中的成员。js文件：
12345678Page({ /** * 页面的初始数据 */ data: { word:"hello world", }})
wxml文件：
1234567<view>{{m1.toUpper("hello")}}</view><view>{{m1.toUpper(word)}}</view><wxs module="m1"> module.exports.toUpper=function( ...
微信小程序-生命周期
生命周期分类1、应用生命周期指小程序从启动——>运行——>销毁的过程2、页面生命周期每个页面的加载——>渲染——>销毁的过程
生命周期钩子应用的声明周期钩子12345678App({ //小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作 onLaunch:function(opt){}, //小程序启动，或从后台进入前台显示时触发 onShow:function(opt){}, //小程序从前台进入后台时触发 onHide:function(){}})
页面的生命周期钩子1234567Page({ onLoad:function(opt){},//监听页面加载，一个页面只调用一次 onShow:function(){},//监听页面显示 onReady:function(){},//监听页面初次渲染完成，一个页面只调用一次 onHi ...
微信小程序-页面事件
下拉刷新开启下拉刷新app.json中的window属性中，或者页面级别的.json文件中配置：
1"enablePullDownRefresh": true
推荐为需要下拉刷新的页面单独配置。
事件处理函数下拉刷新会触发onPullDownRefresh事件处理函数，可以在函数中进行下拉之后的操作
123onPullDownRefresh() { console.log("用户触发了下拉刷新的操作"); }
调用wx.stopPullDownRefresh()函数可以取消下拉状态：
1234onPullDownRefresh() { console.log("用户触发了下拉刷新的操作"); wx.stopPullDownRefresh(); }
上拉触顶上拉触顶距离app.json中的window属性中，或者页面级别的.json文件中配置上拉触顶触发距离，距离默认为50px：
1"onReachBottomDistance": 100
单位默认 ...
微信小程序-页面导航
页面导航声明式导航在页面上声明一个<navigator>导航组件(类似router-link)，点击跳转
导航到tabBar页面使用<navigator>组件，必须指定url属性和open-type属性，其中url表示要跳转的页面的地址，必须以”/“开头。open-type表示跳转方式，必须为switchTab。home.wxml：
1<navigator url="/pages/order/order" open-type="switchTab">导航到tabBar页面</navigator>
导航到非tabBar页面跳转到非tabBar页面可以省略open-type属性。home.wxml：
123<navigator url="/pages/merchant/merchant" open-type="navigate">导航到非tabBar页面</navigator><!-- 到非tabBar页面可以省略open- ...
微信小程序-网络请求
网络请求信任列表出于安全性考虑，小程序只能请求https类型的接口，必须将接口的域名添加到信任列表中。在微信小程序管理后台——>开发——>开发设置——>服务器域名——>修改request合法域名，中添加合法域名。
发送请求wxml代码：
123<button bind:tap="getInfo">发起get请求</button><button bind:tap="postInfo">发起post请求</button>
js代码：
12345678910111213141516171819202122232425262728//发起get请求getInfo(){ wx.request({ url: 'https://www.XXX.com/api/get', method:"GET", data:{ name:"张三", age:80 ...
微信小程序-配置
全局配置根目录app.json是全局配置文件，常用配置如下1、pages：记录当前小程序所有页面的存放路径2、window：全局设置小程序窗口的外观3、tabBar：设置小程序底部的tabBar效果4、style：是否启用新版的组件样式
小程序窗口组成部分
window配置navigationBarTextStyle目前只支持black和white。注意：在真正的手机上，开启下拉刷新下后无法合上，这点和模拟器上不一样，如果想实现真正的下拉刷新还需要一些配置。
tabBar配置tabBar用于实现多页面的快速切换，小程序通常将其分为底部tabBar和顶部tabBar注意：tabBar中只能配置最少两个最多五个的tab页签，当渲染顶部tabBar时不显示icon只显示文本。tabBar的配置：每个tab项的配置：
页面配置小程序中，app.json的window节点可以全部配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时“页面级别的.json配置文件”就可以实现这种需求。注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
微信小程序-基本使用
小程序代码的构成JSON配置文件1、项目根目录的app.json是当前小程序的全局配置，包含了小程序的所有页面路径、窗口外观、界面表现、底部tab等
配置项
作用
pages
记录当前小程序所有页面的路径
window
全局定义小程序所有页面的背景色、文字颜色等
style
全局定义小程序组件所使用的样式版本
sitemapLocation
用来指明sitemap.json的位置
2、project.config.json文件
用来记录我们对小程序开发工具所做的个性化配置
配置项
作用
–
–
setting
保存了编译相关的配置
projectname
保存的是项目名称
appid
保存的是小程序的账号ID
3、sitemap.json文件
微信开开放了小程序内搜索，效果类似于PC网页的SEO。该文件用来配置小程序页面是否允许微信索引，可以修改aciton配置为disallow修改为不允许索引。
4、页面的.json配置文件
可以使用每个页面的.json文件对本页面的窗口外观进行配置，页面中的配置会覆盖ap ...
