微信小程序自定义属有哪些？怎么开发？
关于微信小程序自定义方面的内容，微信小程序商城已经介绍过很多了，那么微信小程序自定义属*有哪些呢?分别要怎样进行开发?以下是相关资料。
1.开发环境
安装之后，和微信web开发者工具一样，扫码登录即可，不同的是，创建一个小程序需要填写AppID，如果没有AppID的话，点击‘无AppID’即可
2.目录结构
一个小程序由两部分组成：框架主体部分、框架页面部分
小程序框架主体部分
框架主体部分包含三个文件，位于项目的根目录
1) app.js
//app.js//app.jsApp({ onLaunch: function () { // 当小程序初始化完成时，会触发 onLaunch(全局只触发一次) // 调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, onShow: function() { // 当小程序启动，或从后台进入前台显示，会触发 onShow }, onHide: function() { // 当小程序从前台进入后台，会触发 onHide }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null }})
app.js内调用了App函数(只能在app.js内调用)注册小程序实例，可以在这个文件中监听处理小程序的声明周期函数，并可以在此声明全局变量。
小程序提供了全局方法getApp返回小程序实例
var app = getApp()console.log(app.globalData) // {userInfo:null}
此外，还提供了getCurrentPage方法获取当前页面的实例，getCurrentPage不能在onLaunch中调用，此时page尚未生成
2)app.json
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { "list": [{ "pagePath": "page/index/index", "text": "首页" }, { "pagePath": "page/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true}
此文件用来对小程序进行全局配置(app.json不得含有注释)
pages 配置页面路由，所有需要使用的页面都需要添加配置
window 设置页面窗口表现
tabBar 设置页面底部tab表现，其中list数组长度不超过5且至少为2
networkTimeout 设置网络超时时间
debug 设置debug模式的开启
3)app.wxss样式表
/**app.wxss**/.Container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}
框架页面部分
框架页面部分包含四个文件
page.js，page.json分别对应于app.js和app.json，不同之处在于page.js中调用的是Page函数，page.json中只能对本页的window进行配置，因此，page.json中直接就是一个对象
{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black"}
然后再看看page.js
// page.jsPage({ data: { // 页面的初始数据 text: "This is page data." }, onLoad: function(options) { // 页面加载时 }, onReady: function() { // 页面渲染完成时 }, onShow: function() { // 页面显示时 }, onHide: function() { // 页面隐藏时 }, onUnload: function() { // 页面卸载时 }, // 自定义属*，使用this方法 viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) }})
3.WXML组件
小程序中并没有html标签，而是提供了一系列WXML组件
view 视图容器
scroll-view 可滚动视图容器
swiper 滑块视图容器
icon 图标
text text
progress progress
button button
checkbox-group 多项选择器，内部由多个checkbox组成
checkbox 多选项目
form form
input input
label label
picker 滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器
radio-group 单项选择器，内部由多个
组成
radio 单选项目
slider 滑动选择器
switch 开关选择器
action-sheet action-sheet
modal 模态弹窗
toast 消息提示框
loading 加载提示符
navigator 页面链接
audio audio
image image
video 视频
map 地图
canvas 画布
这应该是类似于ng中的组件，目前小程序并没有提供自定义组件的功能
4.WXSS
WXSS用于描述WXML的样式表
为了适应各种屏幕，WXSS扩展了尺寸单位rpx(responsive pixel)，规定屏幕宽度为750rpx(20rem)
另外，WXSS并不支持所有css选择器，目前支持的选择器有
.class
#id
element
element,element
:after
:before
5.数据绑定
数据绑定采用 “Mustache” 语法(双大括号)包裹变量
{{hello}} //index.js//index.jsPage({ data: { hello: 'Hello World' }, onLoad: function () { this.setData({ hello:'Hello World' }) }})
WXML 中的动态数据均来自对应 Page 的 data，并且需要调用setData方法通知视图数据变化
6.微信小程序条件渲染
使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块，同大多MV*框架一样，if是惰*的，即初始判断为false时，不会渲染该代码块
True
7.列表渲染
使用wx:for绑定一个数组，wx:for-index可以指定数组当前下标的变量名(默认为index)，wx:for-item可以指定数组当前元素的变量名(默认为item)
{{idx}}: {{itemName.message}}
8.模版
使用name属*定义一个 stemplate 模版，小程序模板拥有自己的作用域
{{index}}: {{msg}} Time: {{time}}
使用name属*使用一个 stemplate 模版，data属*传入模版所需的数据
< template is="msgItem" data="{{...item}}">
data
Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } }})
9.事件
支持事件
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后离开
longtap 手指触摸后，超过350ms再离开
事件绑定
以key-value形式绑定事件
其中key为 bind 或 catch +事件名称，例如bindtap=“tapName”(bind不阻止冒泡，catch阻止事件向上冒泡)
value为函数名称
事件对象
type 事件类型
timeStamp 事件生成时的时间戳
target 触发事件的组件的一些属*值集合 id、dataset、offsetLeft,、offsetTop
currentTarget 当前组件的一些属*值集合 id、dataset、offsetLeft,、offsetTop
touches 触摸事件，触摸点信息的数组 pageX、pageY、clientX、clientY、screenX、screenY
detail 特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入
10.引用
WXML 提供两种文件引用方式import和include
import可以在该文件中使用目标文件定义的template，但不能使用目标文件中import的其他template
// index.wxml
include可以将目标文件中除了
body header footer
11.路由传参
一个url如下
跳转到新页面
在目标页的声明周期函数onLoad中传入options即可获取路由参数对象，另外url是相对的，不是app.json中定义的url
Page({ onLoad: function(options) { this.setData({ title: options.title }) }})
12. 小程序API
框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等，具体可查看官方文档
13.TodoList
最后是一个案例
显示任务
添加任务
删除任务
标记任务是否完成
计算任务总数和已完成的任务数量
index.wxml
确定 {{item.value}}删除 {{complete}}个已完成/{{list.length}}个任务
其中block并不属于组件，不会在页面中渲染，仅作接收控制属*用
index. wxss
/**index.wxss**/.input { padding: 20 rpx}.list view { padding: 10 rpx 20 rpx; overflow: hidden}.list view text { display: inline - block; line - height: 92 rpx}.list view button { width: 200 rpx; display: inline - block; float: right}
index.js
//index.jsPage({ data: { list:[], complete:0 }, bindKeyInput:function(e){ this.setData({ inputValue:e.detail.value }) }, add:function(){ var list = this.data.list; list.push({checked:false,value:this.data.inputValue}); this.setData({ list:list, inputValue:'' }) }, delete:function(e){ var list = this.data.list; list.splice(e.target.dataset.index,1) this.setData({ list:list }) this_task() }, change:function(e){ console.log(e.detail.value[0]) var list = this.data.list; list[e.target.dataset.index].checked = !!e.detail.value[0] this.setData({ list:list }) this_task() }, com_task:function(){ var complete = 0,list = this.data.list; for(var i=0,len=list.length;i
list为任务列表，complete为已完成的任务数量
页面展示效果如下
看完这份资料，大家对于微信小程序自定义属*有哪些都明白了吗?参照上述教程和相应的小程序代码，就可以对小程序属*进行开发了。
小程序自定义关键词的用处有哪些?
怎样设置微信小程序自定义弹窗
小程序自定义swiper开发教程