小程序的初认识及使用

小程序

微信小程序

注册小程序帐号

微信公众平台->注册->小程序(留一个微信号，作为管理员，留一个邮箱作为登录用)

安装开发测试工具

下载

开发文档

框架 组件 API

获取开发秘钥

公众平台登录小程序->开发->开发设置->AppID(小程序ID) wxf34e69dfcc966870

开发工具使用

创建项目，开发，调试，打包，部署，git

框架

微信客户端给小程序所提供的环境为宿主环境，小程序的运行环境分成渲染层(webview)和逻辑层(jscore)，WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层,小程序的渲染层和逻辑层分别由2个线程管理，这两个线程的通信会经由微信客户端

配置

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

全局配置

app.json，对微信小程序进行全局配置(页面管理，窗口设置，网络请求)

页面配置

pagename.json，对本页面的窗口表现进行配置，覆盖全局

项目环境配置

sitemap.json，project.config.json ,sitemap.json 文件用于配置小程序及其页面是否允许被微信索引(SEO)，需要全局禁用索引，配置project.config.json， setting内部添加checkSiteMap:false, project.config.json是项目开发环境配置

注册小程序页面

App() 注册小程序， Page() 注册页面的，都接受一个 Object 参数，App() 必须在 app.js 中调用，Page()必须出现在页面.js中，必须调用且只能调用一次，都会给当前注册生命周期钩子，和实例成员(方法、属性)

Object 参数

• data:{} 数据
• 钩子函数(参数){this 指向当前页面，当前小程序}
• 自定义函数(){ this 指向当前页面，当前小程序 }
• 自定义属性:值

页面与主程通讯

pages里面 let app=getApp(), app.实例属性|方法

数据绑定

响应式数据定义在 data:{} ，wxml数据绑定，格式{{ 数据 }} | 属性="{{值}}"

数据修改

data:{} 数据，在修改实例属性，数据的修改结果是异步

this.data.属性 = 值 修改， view层不实时响应

this.setData({key:value}) 修改，催生view层响应

app.setData({key:value}) 修改的是主程app

setData({key:value},callback)，callback可以抓取实时修改后的数据

事件

<组件 bindxxx="实例方法"></组件> 冒泡

xxx==原生移动端事件名(touchstart/touchend/touchcancel/touchmove/tap/…)

<组件 catchxxx="实例方法"></组件> 不冒泡

传参

<组件 bindxxx="实例方法" data-参数名称="值"></组件>

值： 字符

<组件 bindxxx="实例方法" data-参数名称="{{any}}"></组件>

any 任意类型

实例方法:function(e){e.currentTarget.dataset.参数名称;}

e返回事件对象

列表渲染

<组件 wx:for="{{数据}}">{{item}}/{{index}}</组件>

wx:key="id" 定key id = item.id

wx:key="key" 定key key = item.key

wx:key="*this" 定key *this = item 本身

wx:for-item="xx" 定义item的名字->xx

wx:for-index="xx" 定义index的名字->xx

条件渲染

<组件 wx:if="{{布尔数据}}"> 惰性渲染 ~~ v-if

wx:elif="{{}}"

wx:else

<组件 hidden="{{布尔数据}}" 适合频繁渲染 ~~ v-show

不渲染

分组<block wx:if="">被包裹的元素</block>，或声明业务逻辑，自身不渲染

双向绑定

<input value="{{ipt}}" bindinput="checkIpt"></input>

 checkIpt(e){
    this.setData({ipt:e.detail.value});//双向绑定
  },

简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：

<input model:value="{{value}}" />

钩子函数