小程序笔记（装软件，配环境）

小程序笔记（装软件，配环境）

1.官网申请开发者账号，地址为：
.html?t=18101214
2.点击自动跳转的小程序地址，mp.weixin.qq，进行注册（订阅号，服务号，小程序，企业微信）
3.点击小程序，账号信息 => 邮箱激活 => 信息登记
4，对帐号进行初始化设置
4.1基本信息设置
mp.weixin.qq，输入邮箱密码进入，弹出一个二维码，用注册的微信扫
描，左侧设置 => 基本设置，按需填写
4.2开发者设置
开发 => 开发设置 小程序ID（自动生成，可暴漏），小程序密钥（重置，
存好，机密）
慎重修改request合法域名，每月只能改5次
5.下载并安装微信开发者工具
根据自己的操作系统是多少位的来下载（建议下载稳定版本）必须是Windows7
以上的版本，网址是.html
6.创建小程序项目
①打开小程序开发者工具，用微信扫码登录开发者工具
②点击左侧菜单中的小程序选项
③点击+号新建小程序项目
④填写项目名称
⑤选择项目存放路径（必须选择空目录）
⑥填写AppID
⑦点击新建按钮
7.知识点 app.js => 小程序全局的入口文件
app.json => 小程序的全局配置文件（每个页面都生效） 这两项是必
须的
app.wxss => 小程序的全局样式
fig.json 是全局的开发工具配置文件（不太重要 a）
utils（目录） 存放小程序中用到的工具函数
pages（目录）存放小程序的页面
index:（页面）
index.wxml（页面） index.js（逻辑） index.json(配置)
index.wxss（样式）
logs:（logs页面）
logd.wxml(logs页面结构) logs.js(logs页面逻辑)
对于小程序来说，.js 和 .wxml是必须的
组件的组成部分（template，script，style）和vue组件结构一样
页面的组成部分（.wxml .js .json .wxss）
8.新建小程序页面
①进入微信开发者工具，按提示一步步创建即可，（APPid 别忘了）
②在pages目录下新建自己的Home页面，鼠标右键，新建home目录，然后
home目录继续右键，新建page，直接写home即可自动生成四个小页面
（.wxml .js .json .wxss）||| 也可以直接在app.json中直接路径
写"pages/home/home"即可
③设置小程序项目默认首页，在app.json中设置，pages下面第一项是默认的首页，如果要想更改默认首页，只需更改顺序即可
④小程序常用组件

     <text selectable ></text>   行内元素①属性名**selectable** 不写默认非选中，写上不给值默认为true，**只有text组件支持长按选中**②属性名**space**   ，属性值“ensp(一个英文字符空格)”，“emsp（一个中文空格）”，“nbsp（当前文字的大小）”③属性**decode**，是否解码，&nbsp(空格),  &gt（>),  &lt(<),  &amp(&),   &apos（'）   <view></view>,块级元素，独战一行 ，无内padding和外margin①属性**hover-class**，指定鼠标按下去的样式，可设置类名，如：hover-class=“aaa”，值为none时无任何样式，在wxss文件中写.aaa{样式}②属性**hover-start-time**，按住后多久出现点击状态，默认时间是50毫秒，可自己设置，hover-start-time=“2000”③属性**hover-stay-time**，默认手指松开开后保留状态的时间，④属性**hover-stop-propagation**，阻止冒泡，默认为false<button></button>，按钮组件，默认占一行，①属性**size**，<button size=“mi'ni”></button>size是mini时，默认变成行内元素，②属性**type**，<button type=“primary”></button>type值为primary，背景是绿色，值为warn，背景是红色③属性**plain**，按钮是否漏空，背景是否透明，<button type=“primary” plain=“true”></button>，显示的是红框红字，默认为true④属性**disabled**，是否禁用，默认为false⑤属性**loading**，loading前是否带loading图标，默认false<input></input>，①属性**value**，属性的默认值，未写啥都没有②属性**type**，输入类型，（数字，身份证，小数点，文本）③属性**password**，是否密码型，默认false④属性**disabled**，y'no是否禁用。默认false⑤属性**placeholder**，默认占位符⑥属性**maxlength**，值为-1，代表不设置最大宽度,默认140字符<image></image>，默认宽300px，高200px，空标签也会占位置①属性**src**，后面跟路径②属性**mode**，图片裁剪缩放模式属性值为：aspectFit，长边显示出来，保持纵横比。属性值为：aspectFill	短边显示，其他边切割

小程序，wxss样式扩展
①新增尺寸单位，rpx(小程序中独有的解决自适应的单位)
普通css中的样式选择器都能用，多出来一个重要的自定义属性选择器，
即data-样式名，如,样式中写[data-color=“pink”]

		规定屏幕宽度为750rpx，iphone上，1rpx=0.5px=1物理像素，即1px=2rpx,设计师设计的是二倍稿，直接进行px和rpx换算即可。（设计稿宽度/2*2，，相当于没有计算）②样式导入（公共样式写在assets中，css目录下，有common.wxss）@import "路径"；（分号不能省）app.wxss样式为全局样式，作用于每一个页面，page中的.wxss只是局部生效，当局部样式权重大于或者等于全局样式时，局部样式优先级更高

app.json配置文件使用说明

决定小程序的路径（pages数组），窗口表现（window），网络超时时间，多tab（tabBar）pages 数组：配置小程序的页面路径，不用写后缀名，直接加载相关的全部文件"pages": ["pages/home/home","pages/index/index","pages/logs/logs","pages/assets/css/global.wxss"],window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色小程序窗口的组成部分（导航条，背景区域（下拉才显示），页面主题区域）## window节点常用配置项有如下

设置导航栏标题内容;导航背景颜色（只接受16进制值）;文字颜色（只能黑或白色）;全局开启下拉刷新（“enablePullDownRefresh”:true）;下拉刷新背景色（backgroundColor：“16进制颜色”）；下拉 背景小圆点样式（:backgroundTextStyle":“light/dark(黑白)”）；上拉触底距离（onReachBottomDistance默认50px）都在app.json中，window中设置(不用写在window中,直接写样式就好)

	tabBar 对象：配置小程序的tab栏效果(最少2个，最多五个，顶部只显示文本，底部有图标有文本)

		在app.json中，配置"tabBar":{"selectedColor": "#aaa",”borderStyle“：“white/light（仅支持黑白）”，"list":[{"pagePath":"要跳转的路径（pages中要先定义）"，（必填）“text”：“按钮上的文字”，（必填）“iconPath”：“/图标路径”，（/表示根路径）“selectedIconPath”：“选中时的图标路径”}]}配置tab栏详细步骤：1，pages中组件三个page页面2，根目录下新建assets->images目录，将选中和非选中的图标粘贴进去，3.tabBar中配置，即list中的内容页面级别的配置文件：1,打开需要配置的页面中的.json文件，在里面添加配置项，但是有要求，

只能配置如下属性：导航栏配置的内容和disableScroll（值为true时，页面不
能上下滚动，默认false）
9.生命周期
应用生命周期（小程序），
分别有：onLaunch，onShow,onHide,onError
app.json中配置，调用App（object）方法，App({
生命周期函数写这里
})
页面生命周期（页面）,
分别有：onLoad，onShow, onReady, onHide, onUnload
要配置的页面.json中配置，调用Page（object）方法，Page({
生命周期函数写这里
})
10.获取数据，传递数据，绑定事件（双向数据绑定，通过this.setData({})）
10.1 data节点定义页面的数据 page({
data:{aaa:‘123’},
事件名（event）{

																}，iptHandle（event）{this.setData({aaa："123456"})}})	  页面中直接使用Mustanch语法（vue只能用到内容节点，而小程序中也可	用于属性节点），，，，可以{{绑定内容 / 绑定属性/ 运算（三元，逻辑，算术，路径等）}}	如：<view id="item-{{id}}"></view>10.2 标签中绑定触摸事件，<view bindtap="事件名称"></view>  bindtap可简写为@tappages中，和data平级，定义函数，看10.1代码书写10.3 bindinput（@input）绑定输入事件，用法同上，若想实时获取数据，必须要用e.detail.value<view bindinput="iptHandle"></view>10.4 文本与数据同步，绑定的处理函数中，调用this.setData({要更新的数据：更新后的值})方法，里面的参数时个对象。看10.1代码****后台AppData中是页面数据****10.5页面不能通过事件后加小括号形式传递参数，bindtap="Handle(123）",会被当作一整个事件名称来解读。可通过自定义参数传值，如下传参：<view bindinput="iptHandle" data-info="asdfg'></view>接收参数：事件处理函数中：e.target.dataset.info

11.wxs脚本

		wxs：是小程序的一套脚本语言，结合wxss构建出页面结构隔离性，在wxs中不能写js代码，也不能调用微信提供的API遵循CommonJjs模块化代码，和写node代码类似

一个wxs中，引入其他的模块，用require（‘./相对路径’）
wxs是单例模块（只有一个，多人共享）
支持的数据类型有：Boolean，string，number，object，date，function，
array，regexp
**wxs内联脚本：**写在中，如下示例

var some_msg=“helloWorld”
ports={
msg:some_msg
}

{{foo.msg}}
wxs外联脚本：
1.直接创建.wxs脚本
2.在需要引入的文件内部引入，src是路径，module是起的名字

{{aaa.msg}}
只能用普通的语法，ES5和ES6的语法不能用

小程序条件渲染

	1.wx:if,   wx:else,  wx:elif2.<block></block>block标签只起到包裹作用，没有任何渲染作用，比如wx:if条件要渲染两个元素，为了避免麻烦，在外层加一个block标签，写判断条件3.hidden控制元素的显示与隐藏，<view hidden="true">隐藏状态</view>4.wx:if和hidden区别wx:if有更大的切换消耗（适合只一次显示与隐藏，显示隐藏的过程是创建销毁DOM的过程）hidden有更大的初始渲染消耗（适合频繁的显示隐藏，只是控制display属性的显示与隐藏）**获取data中的info属性值，是通过this.data.info来获取函数定义：getHandle：function(){}**5.wx:for  列表渲染 wx:for="{{list}}"  wx:key="index"默认下标为index，默认当前项为item

小程序下拉刷新设置

1.可全局设置。在app.json中设置 "enablePullDownRefresh":true,,,,,,,,,,一般建议在需要的页面设置，需设置的页面.json文件中设置， "enablePullDownRefresh":true
2.wx.startPullDownRefresh(),调用全局的下拉刷新的函数，如点击按钮触发事件中可以写。。
3.监听页面下拉刷新事件函数，**onPullDownRefresh：function(){}**,系统已经自动定义好的函数，可直接使用
4.停止下拉刷新效果，在onPullDownRefresh函数中执行完逻辑后，调用这个阻止下拉刷新的函数wx.startPullDownRefresh()

小程序上拉触底距离设置，及上拉触底事件

	1.上拉触底距离配置，在需配置的页面.json中，"onreachBottomDistance": 100（自定义）页面触底后会触发onReachBottom（）函数。2，对应页面.js中有个onReachBottom（）函数，在里面执行代码逻辑3.页面触底，分页加载，也在onReachBottom（）函数中实现，首先页码加一，然后循环，循环的数量是一页显示几条数据，新建一个数组，通过变量接受新赋的值，然后push到新的数组中，最后更改thisetData({})中变化的值。4.页面其他事件，包括页面滚动出去的距离  onPageScroll(obj){log(obj)			}**此处obj.scollTop参数即页面滚动出去的距离，，**5.转发事件，onShareAppMessage（obj）{}，也是.js中定义好的obj身上有三个属性，分别为为from，target，webViewUrl（可通过obj.属性获取）5.1   from有两种方式。一是menu（右上角三个点）；二是button（自己定义的buton按钮，button中属性 写open-type="share"）     5.2  target当通过按钮点击转发的时候，即from为button时，，得到的是target触发事件源（可以得到传 递的参数），通过右上角分享的时targe值为undefined**自定义转发内容，在onShareAppMessage（obj）{return {title：‘’，path:'',imgUrl:''}}中return 一个对象，对象中定义转发的标题（title），路径（分享后用户点击会跳转的path），图片路径（imgUrl，，想让用户看到的图片）

获取tab栏信息的事件

	在对应的页面.js中，写onTabItemTap(Object){}函数，如下onTabItemTap(Object){console.log(object)   console.log(object.index)   可以得到索引console.)  可以得到tab文本console.log(object.indexpagePath)  

小程序页面导航

	1.声明式导航，通过使用navigator组件实现的1.1   跳转到非tab页面，路径要是绝对路径（pages先声明）<navigator url="/page/main/main">1.2  跳转到tabBar页面，上面代码要额外加一个  open-type=“switchTab”  属性<navigator url="/page/main/main"   open-type=“switchTab” >1.3  后退导航  	<navigator open-type=“navigateBack”  delta="1">后退</navigator>delta是后退层级数2，编程式导航2.1导航到非tabBar页面API方式，调用方法：wx.navigateTo({url:'/绝对路劲‘})2.2导航到tabBar页面API方式，调用方法：wx.switchTab({url:'/绝对路劲‘})2.3后退导航API方式，调用方法：wx.navigateBack({delta:1})

导航传参（传递和正常页面一样，？拼接参数，多 个参数之间用&连结）

		1，页面接收参数，通过页面.js中的onLoad函数，参数option即传递的参数onLoad：function（options）{console.log(options)}

配置服务器域名（一月最多修改五次）

	步骤：小程序 -> 开发 -> 开发设置 -> 服务器域名*注意：*  1端口和域名的都要写全，必须ICP备案，2.只支持 https（request,uploadFile,downloadFile） 和  wss(connectSocket) 两种（https开头或者是wss开头），也不支持IP地址

前期开发可以暂时不配置，跳过域名校验
步骤：右上角详情 => 本地设置 => 勾选不校验合法域名项(项目上线一定要
取消此勾选)

发起网络数据请求（无跨域问题）

	直接调用    wx.request({})函数，默认是get请求，{}中的是request的参数，如下所示

post请求和get请求写法一样，子不过在get基础上，多了个
method：’POST‘，

组件的创建与引用(建议用class选择器美化样式)

	1.创建，根目录下创建一个 components目录 =》components下新建test子目录=》点击test右键新建Component，重新命名（test）2.引用组件  2.1在需要引用组件的页面中，找到页面的 .json 配置文件，新增 usingComponents 节点2.2在 usingComponents 中，通过键值对的形式，注册组件；键为注册的组件名称，值为组件的相对引用路径2.3在页面的 .wxml 文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示到页面上如：message文件中要引入组件，。message.json中{”using Components“：{”vant-button“：“相对路径”}}message.wxml文件中，直接引入组件名字<vant-button></vant-button>

注意：注册组件名称时，建议把名称注册为短横线连接的形式，例如 vant-button 或 custom-button
在美化组件时注意事项：1建议用classs选择器
2.app.wxss和页面所在的样式对组件无效
3，font，color会从组件外继承到组件内
4.子元素选择器（.a>b)只能用于view组件及其子节点间

组件中的data和methods用法

1.组件用法 和页面data用法一致，只不过页面的data定义在Page（）{}函数中，而组件则定义在Compnent（）函数中**在组件的 .js 文件中：**如果要访问 data 中的数据，直接使用 this.data.数据名称 即可如果要为data 中的数据重新赋值，调用 this.setData({ 数据名称: 新值 }) 即可**在组件的 .wxml 文件中：**如果要渲染 data 中的数据，直接使用 {{ 数据名称 }} 即可
2.methods用法 	组件的事件处理函数，必须定义在methods中，而页面中则在Page中即可如下：Component({methods: {// 按钮的点击事件处理函数btnHandler: function() {}}})

自定义组件

	1.组件传值声明properties:{propsA:String(声明属性的类型)}2.为组件传递properties的值（类似于父向子传值）<!-- 引用组件的页面模板 --><view><component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"></component-tag-name></view>在以上例子中，组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过setData 来改变绑定的数据字段。 **注意：**在定义 properties 时，属性名采用驼峰写法（propertyName）；在 wxml中，指定属性值时，则对应使用连字符写法（property-name=“attr value”），应用于数据绑定时，采用驼峰写法（attr="{{propertyName}}"）。

修改propeties的值，和data用法一致，即this.setData({ count：
unt}）即可

数据监听器（类似于vue中watch）observers

	**监听和相应任何属性和字段的变化**，只要数据发生变化，函数中的新值就会变化，即可以执行相应的逻辑Component({observers: {'字段A, 字段B': function(字段A的新值，字段B的新值) {console.log()}}})

定义生命周期函数

	建议写在lifetimes字段内如：Component({lifetimes: {created（）{}  //组件实例刚被创建时attached() {}, // 在组件实例进入页面节点树时执行detached() {}, // 在组件实例被从页面节点树移除时执行},})

组件所在页面的生命周期

	Component({pageLifetimes: {show() { // 页面被展示执行},hide() { // 页面被隐藏执行},resize(size) { // 页面尺寸变化执行}}})

组件插槽（支持默认插槽和具名插槽）类似于父子传值（在组件名称中间传递）

默认插槽
子组件中放置插槽

这里是组件的内部节点


父组件中传递的内容，在子组件插槽中显示



这里是插入到组件slot中的内容


具名插槽
1先启用多插槽：Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* … / },
methods: { / … */ }
})
2.


这里是组件的内部细节


3.



这里是插入到组件slot name="before"中的内容


这里是插入到组件slot name="after"中的内容

组件通信（子向父传值）

方法1，this.selectComponent(string)

		Page({**（不一定在onLoad中，任何的函数都行）**onLoad(){// 切记下面参数不能传递标签选择器（component-a），不然返回的是 nullvar component = this.selectComponent('.customA'); // 也可以传递 id 选择器 #cAconsole.log(component);}})

方法2：事件监听方式
1.在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，
传递给子组件
2.在父组件的 wxml 中，通过自定义事件的形式，将步骤一中定义的函数引
用，传递给子组件
3.在子组件的 js 中，通过调用 iggerEvent(‘自定义事件名称’,
{count：this.properties.propCount }) ，将数据发送到父组件
4.在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据