小程序初始

小程序开发，微信提供自己的开发工具。 目前只有这种渠道进行开发。

安装完成，新建文件，AppID通过微信公众号平台注册获取。 没有可不填，进行体验。小程序文件包含app.js app.json app.wxss app.wxml 分别对应网页js  json  css html。 

初始化demo根目录3个为全局文件：

app.js小程序的初始化脚本，监听小程序生命周期，全局变量，定义API全剧调用。

app.json小程序的全局配置。pages页面的组成，所有页面都需要在pages里面注册，第一条默认为首页显示。window设置页面顶部显示内容及样式。tabBar设置底部导航栏内容及样式。networkTimeout网络延迟设置。debug开启debug模式。

app.wxss小程序的全局配置公共样式表。

pages文件为页面基础目录。 pages文件里面的页面需要在app.json  pages里面注册页面。

index为pages文件夹中的一个文件。 

index.js：

页面引入其他js文件，require方法。 var network = require("../../ajax.js"); 路径推荐相对路径

page({

   data:{text:'小程序'} 页面数据部分。可以接受对象，数组，字符串。应用于页面数据渲染。

   onLoad:function(options){}  生命周期函数，监听页面加载。 载入页面执行一次onload。options用来获取页面跳转传递的参数。options为对象。可以直接获取。

   onShow:function(){} 生命周期函数，监听页面显示。 这个方法可以动态渲染页面，刷新页面数据，执行多次。

   onReady:function(){} 生命周期函数，监听页面初次渲染完成执行。

   onHide:function(){}生命周期函数，监听页面隐藏执行。

   onUnload:function(){}生命周期函数，监听页面卸载执行。

   onPullDownRefresh:function(){}生命周期函数，监听用户下拉动作。

   onReachBottom:function(){}生命周期函数，监听页面触底事件。

   onShareAppMessage:function(){}生命周期函数，用户点击右上角分享。分享路径推荐/pages/index/index 后面可携带参数通过options获取

   changeText:function(event){

      console.log(event);

      this.setData({

      text:'第一个小程序'

      })

   } 自定义点击事件。执行更改data对象里面的text对应的值。 setData({})只接受一个对象。event用于获取点击元素上的参数传递。这里获取页面元素传递的name从event.currentTarget.dataset.name。

})

   

index.json  页面的配置文件，当有页面的配置文件时，配置项在该页面会覆盖app.json的window中的相同配置。import与include用于引用页面template

index.wxml 页面的结构文件，页面的编写方式与HTML文件一样。 小程序提供了特有的标签，view，block ,image等。标签必须是合并标签。同时可以使用div，span ， p标签。小程序提供基础组件，开发者可以根据这些组件快速开发。 <import  src=' ../template/detail/detail.wxml' />  

上图为index.wxml文件。编写方式相同。标签上有特定的参数与点击事件方法。 name属性通过事件传递数值。 页面点击事件每个类型前面添加bind

index.wxss 页面的样式表. 同css样式表一样。 <wxs src='../template/detail/detail.wxss' module='detail'>   @import '../template/detail/detail.wxss';