小程序基础

开发模式与vue差不多
小程序导航的使用：

“tabBar”: {
“color”: "#000,
“position”: “bottom”,
“backgroundColor”: “#eee”,
“selectedColor”: “#fod”,
“borderStyle”: “black”,

“list”: [
{
“pagePath”: “pages/home/home”,
“text”: “热销”,
“iconPath”: “static/images/home2.png”,
“selectedIconPath”: “static/images/home1.png”
},
{
“pagePath”: “pages/food/food”,
“text”: “首页”,
“iconPath”: “static/images/user1.png”,
“selectedIconPath”: “static/images/user2.png”
},
{
“pagePath”: “pages/list/list”,
“text”: “商品”,
“iconPath”: “static/images/news2.png”,
“selectedIconPath”: “static/images/news1.png”
}
]
},

小程序方法与数据
在js中定中定义一个数据或方法通过bindtap调用
通过this.setData({})改变数据
获取view页面传过来的值，通过event时间对象，event.currentTarget.dataset.aid来获取
接口
利用wx.request来获取数据
var that = this
var api = config.host+‘api/productcontent?id=’+id;
wx.request({
url: api,
header:{‘content-type’:‘application/json’},//默认值
success:function(res){
console.log(res.data)
然后在view遍历渲染数据，
利用get传值
在页面需要跳转的view页面定义data-id=’{{food._id}}‘进行传值，然后在js跳转方法中
利用事件对象来获取通过跳转wx.navigateTo({
url: ‘…/foodcontent/foodcontent?id=’+id//需要传值的页面
})
前面笔记没跟上，以后补上
解析HTML组件的使用：web-view 现在不适于个人与海外
解析HTML插件的使用：wxParse
1.在GitHub上找到它，然后下载，解压，把wxparse加入项目中
1，拷贝wxParse目录
2，引用//在使用的页面js中引入WxParse模块var WxParse = require(’…/…/wxParse/wxParse.js’);//在使用的Wxss中引入WxParse.css,可以在app.wxss@import “/wxParse/wxParse.wxss”;
在wxml中引入


3，数据绑定var article = ‘我是HTML代码’;/***
WxParse.wxParse(bindName , type, data, target,imagePadding)*
1.bindName绑定的数据名(必填)*
2.type可以为html或者md(必填)*
3.data为传入的具体数据(必填)*
4.target为Page对象,一般为this(必填)*
5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/var that = this;WxParse.wxParse(‘article’, ‘html’, article, that, 5);模版引用//这里data中article为bindName

小程序模块化utils
//将一些公共的代码封装成一个js文件，模块里面的的属性和方法是私有的不可见的，通过exports或module.exports暴露才能通过require其他文件里面使用
小程序app.js
在全局app.js中配置方法
通过var app = getApp(),然后在load生命周期函数中调用
wxs中脚本语言的使用
wxs就是一个模块的语言，但它有自己的的语法，定义方法必须要暴露才能使用
在需要用到的wxml中引入
在页面显示数据{{tools.bar(‘哈哈哈’)}}
小程序组件
功能：将一些公共的代码封装一个组件，自定义组件，弥补内置组件的不足
首先新建component目录，再新建一个组件目录 在页面json中配置
“br”:"…/…/component/br/br",
自定义组件 组件事件，父子传值
父组件给子组件传值
第一步在父页面js中写入一个属性，
第二步父组件在调用子组件中绑定属性，
第三步子组件js通过properties: {}接收，
// 属性定义（详情参见下文）
properties: {
myProperty: { // 属性名
type: String,//数据类型
value: ''属性初始值，如果未指定会根据类型选择一个
},
myProperty2: String // 简化的定义方式
},
第四步然后在子组件里面{{}}显示
solt，父组件调用子组件的方法，子组件执行父组件的方法

父组件调用子组件的方法
1.调用子组件的时候定义一个id

<!–如果未指定属性title，会用js
2.父组件获取子组件的实例，var header = this.selectComponent(’#header’)
3.获取数据与方法
console.log(header.data.msg)//获取子组件的数据
header.run()//调用子组件的方法

子组件执行父组件的方法
父组件定义方法
在methods中定义一个方法getparent然后传入 this.triggerEvent(“parent”,“子组件的方法”)在car.js中
触发父组件的方法在子组件中
父组件调用子组件（在第4个项目中）
view结合scroll-view实现下拉分页加载更多
1在view中写入scroll-view，设置他的高度以及到底部触发一个方法更新到下一页

2在js中定义loadMore,当到达底部时调用请求数据的方法，
3.在onLoad中获取屏幕的高度返回给页view
4.将分页设置为第一页 ，然后在请求数据的改变增加页数，将新数据与老数据用concat连接起来