微信小程序笔记

小程序APPID

每个小程序的唯一标示
每个账号只有一个APPID
个人账号与企业账号的区别
个人账号不能发布小程序
企业账号能发布小程序
注意：在公司开发时一定要用企业账号的APPID进行开发
账号申请
登陆后：
小程序控制平台：
管理：管理小程序

管理开发成员

统计：统计小程序的使用情况
功能：官方提供的功能
开发：开发工程中所需要的APPID所在地址
推广：推广小程序

文件结构

app.js逻辑代码编写javascript代码文件
app.json 小程序公共配置
app.wxss 小程序公共样式表
page文件夹存放页面的文件夹

每个页面组成分别为

wxml 是 页面结构 可以比作为html
wxss 否 页面样式表 可以比作为css
json 否 页面配置
js 是 页面逻辑 可以别作为javascript

app.json中的配置

pages:小程序页面配置
window:小程序窗口配置
tabBar:tab导航设置
(1)list: tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
(1-1):iconPath:图标路径
(1-2):selectedIconPath:选择图标路径
(1-3):pagePath:页面路径
(1-4):text:显示文字
(2)color:tab上文字的颜色
(3)selectedColor:文字选中的颜色
(4) backgroundColor:tab背景颜色
(5)borderStyle:tab边框颜色只支持黑白
(6)position:tab导航位置：可选bottom/top

定义请求超时时间

"networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },

定义日志输出

"debug": true,

逻辑层：

路由api：

<navigator open-type='navigateTo' url='/pages/list/list'>打开list页面</navigator>
打开新页面： wx.navigateTo隐藏当前页面打开新页面
<navigator open-type='redirectTo' url='/pages/list/list'>打开list页面</navigator>
打开新页面：wx.redirectTo卸载当前页面并打开新页面
<navigator open-type='navigateBack' url='/pages/list/list'>返回上一页</navigator>
返回上一个小程序页面wx.navigateBack({})
打开tab页面wx.switchTab

js模块化

一般用于封装公共方法如：请求封装

function ajax(url,data,fun){
  // wx.request({
  //   url: url,
  //   data:data,
  //   success:function(res){
  //     fun(res);
  //   }
  // })
}
封装完方法后如果其他js需要使用还需要公开接口
使用moudle.exports公开如：
moudle.exports.myajax = ajax;
其他js调用
var myajax = require(xxx.js);
使用
myajax.myajax(url,data,function(){})

视图层

数据绑定
要显示变量通过{{}}形式显示数据
 列表循环
在视图层中使用wx:for = “{{arr}}” 显示{{item}}
wx:for：循环要被循环的数据
wx:key:定义当前循环的键
{{index}}:当前循环的索引
{{item}}:当前循环的每一项

条件渲染：

wx:if
wx:elif
wx:else
注意：条件渲染如果不满足条件当前元素不渲染（标签元素也不会存在页面中）

视图层

数据绑定

要显示变量通过{{}}形式显示数据
定义数据变量在逻辑层 .js文件中的data:{}中进行数据定义

列表循环

在视图层中使用wx:for = “{{arr}}” 显示{{item}}
wx:for：循环要被循环的数据
wx:key:定义当前循环的键
{{index}}:当前循环的索引
{{item}}:当前循环的每一项

条件渲染：

wx:if
wx:elif
wx:else
注意：条件渲染如果不满足条件当前元素不渲染（标签元素也不会存在页面中）
事件：
bindtap:触屏点击事件
bindlongtap：长按屏幕事件
bindscroll:滑动时间
bindinput:输入框监听值改变或输入事件 得到用户输入的值e.detail.value
组件
在制作小程序时一定注意：小程序的大小最大为2048kb
注意：如果有图片资源一定存放在服务器进行调用
 
data值修改：
this.setData({
	index:2
})
this.setData即改变值并同步到视图层
this.data.index = 2
this.data 只改变逻辑层的值不会同步到视图层

自定义公共组件

什么是公共组件

   第一步：类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：
{
  "component": true,//声明这是组件
  "usingComponents": {}//可选 引入其他组件编写方式
}
第二步：
创建wxml模板
第三步：
定义数据类型：
第四步：
调用组件
（1）在需要使用的页面json中进行调用
{
	“usingComponents”:{
		“you tagName”:”component path”名字与路径
}
}
（2）在页面中使用wxml使用
   <you tagName></you tagName>
(3)向组件中传递数据js data中设置数据
<you tagName   youdata=”{{YOUDATA}}”></you tagName>

页面要使用子组件中的方法

（1）在页面渲染完毕时得到子组件
（2）使用自定义事件触发回调函数才能得到组件中点击的回调参数

子组件向父组件传值使用事件触发triggerEvent()触发父组件上自定义的事件并传值

自定义事件方式：bind:事件名