微信小程序
一、简单了解
1.常用api
<https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E4%BD%93%E9%AA%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F>
官方示例源码地址：
<https://github.com/wechat-miniprogram/miniprogram-demo>
pages每个文件夹就是一个页面:
2.常用ui地址
二、微信小程序应用配置
根目录
app.json界面外观
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
"backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }
pages
设置页面
window
设置导航栏，设置下拉刷新
debug:
debug: true 调试模式
app.js:
//app.js var obj = { onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null } } //调用了一个App的方法 App(obj)
//调用App方法的作用是用来创建应用程序实例对象 //定义应用程序的声明周期事件
wxss
写一些样式的文件
页面结构
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
log.json 覆盖app.json里面的全局外观配置。
page.json
页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象
注意： 只能设置 window的配置，不能设置pages和debug的参数
标签栏
在app.json中设置tabBar.
tabBar中list设置2-5个标签
"tabBar": { "list":[{ "pagePath":"pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] }
"tabBar": { "color": "#444", "SelectedColor": "#219BF3", "backgroundColor": "#e0e0e0", "borderStyle": "white", "position": "bottom", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath":"images/1.png", "selectedIconPath":"images/3.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/1.png", "selectedIconPath": "images/3.png" } ] },
三、逻辑层与界面层分离架构
逻辑层:
界面层
逻辑层的JavaScript
和普通的js的差别:
1：没有bom和dom
2：小程序的js有一些额外的成员
App 方法 用于定义应用程序实例对象
Page方法 用于定义页面对象
getApp 方法 用于获取全局应用程序对象
getCurrentPges 方法 用来获取当前页面的调用栈（数组，最后一个是当前页面）
wx对象 用来提供核心Api的:
专门的页面介绍:https://developers.weixin.qq.com/miniprogram/dev/api/
//console.log(wx) 小程序的js是支持commonjs规范的: //const foo = require(’./utils/foo.js’) //foo.say(‘world’)
演示: getApp
app.js中:
定义个foo方法:
index.js中:直接调用:
打印结果如下:显示已经调用成功。
演示 getCurrentPages()
演示符合commonjs规范
在utils下建个foo.js
function say(msg){ console.log('Hello' + msg) } //导出say方法 module.exports = { say: say }
在app.js中调用:
看下运行效果:
总结就是: 一个export 一个 require
不支持export.xxx；只支持module.exports
演示 wx对象
在app.js中
console.log(wx)
效果:
界面层（数据绑定）
数据绑定
数据绑定–元素上绑定
index模块
//index.js //获取应用实例 const app = getApp() Page({ //为页面提供数据的 //data就是界面和逻辑之间的桥梁 data: { message: 'Hello World', person:{ name:"小胡" } } })
<!--index.wxml--> <!-- 框架最大的特点，就是让我们开发者必须按照特定的方式编写代码 --> <!-- 1.数据在哪 (当前页面对象的data 属性中） 2.绑定到哪里去（想绑定到哪就在哪里用mustche语法输出） --> <view class="container"> <!-- 这种{{}}的语法叫做小胡子语法 --> <text>{{message}}</text> <text>{{person.name}}</text> </view>
页面效果:
数据绑定–属性上绑定数据
/**index.wxss**/ .hello{ width: 100px; height: 100px; background-color: pink; }
看下效果:
源码地址:
https://github.com/hufanglei/wx-demo/tree/attr-bind
数据绑定–属性上绑定数据–拼接数据
注意: world后面有空格。
/**index.wxss**/ .hello{ width: 100px; height: 100px; background-color: pink; } .world { background-color:yellow; }
效果:
数据绑定–知识补充
1.在{{}}中写字符串
<view class="world {{ viewClassName }}"> <text>{{ 'hello' }}</text> </view>
效果(hello不是变量)：
2.计算变量
<text>{{ 111 }}</text> <text>{{ 111 + 999 }}</text>
3.{{}} 可以解决 语法解析 true /fasle 出现bug的问题
举例说明:
<!--index.wxml--> <!-- 框架最大的特点，就是让我们开发者必须按照特定的方式编写代码 --> <!-- 1.数据在哪 (当前页面对象的data 属性中） 2.绑定到哪里去（想绑定到哪就在哪里用mustche语法输出） --> <view class="container"> <!-- 这种{{}}的语法叫做小胡子语法 --> <text>{{message}}</text> <text>{{person.name}}</text>
<!-- mustache 语法可以用在:
1. innerHTML（类似）
2. 元素的属性上
不能用在标签名和属性名上
-->
<view class="world {{ viewClassName }}"></view>
<!-- 可以使用字面量和简单的逻辑运算符 --> <text>{{ 'hello' }}</text> <text>{{ 111 }}</text> <text>{{ 111 + 999 }}</text> <text>{{ 100 > 50 ? '你对了' : '你错了'}}</text> <!--
当语法解析误解了 true/ false
可以使用{{}} 解决
--> <checkbox checked="{{ false }}"> </checkbox> </view>
不加{{}}就会出现问题
<checkbox checked="false"> </checkbox>
居然选中了！！
解决方式就是： false外面包一层 {{}}
列表渲染
1: 明确页面结构的循环体
2：删除多余的重复内容，只保留一个
3：在剩下的这个价格wx:for属性，属性值等于要遍历的数据源，数据源是数组
4：在这个标签(循环体)内部使用item代表当前被遍历的元素
给被遍历的对象定义名称 wx:for-item
给遍历的下标(索引) 定义名称 wx:for-index
代码演示:
<!--index.wxml--> <!-- 框架最大的特点，就是让我们开发者必须按照特定的方式编写代码 --> <!-- 1.数据在哪 (当前页面对象的data 属性中） 2.绑定到哪里去（想绑定到哪就在哪里用mustche语法输出） --> <view class="container"> <!-- 这种{{}}的语法叫做小胡子语法 --> <text>{{message}}</text> <text>{{person.name}}</text> <!-- mustache 语法可以用在: 1. innerHTML（类似） 2. 元素的属性上 不能用在标签名和属性名上 --> <view class="world {{ viewClassName }}"></view> <!-- 可以使用字面量和简单的逻辑运算符 --> <text>{{ 'hello' }}</text> <text>{{ 111 }}</text> <text>{{ 111 + 999 }}</text> <text>{{ 100 > 50 ? '你对了' : '你错了'}}</text> <!-- 当语法解析误解了 true/ false 可以使用{{}} 解决 --> <checkbox checked="false"> </checkbox> <!-- 列表数据渲染 --> <!-- <view> <view> <checkbox></checkbox> <text>JavaScript</text> </view> <view> <checkbox checked="{{true}}"></checkbox> <text>HTML</text> </view> <view> <checkbox></checkbox> <text>CSS</text> </view> </view> --> <view wx:for="{{ todos }}" > <checkbox checked="{{item.completed}}"></checkbox> <text>{{item.name}}</text> </view> 如果全局属性中有item这种关键词，可以使用wxlfor-item去给当前遍历数据起别名 <view wx:for="{{ todos }}" wx:for-item="aaa"> <checkbox checked="{{aaa.completed}}"></checkbox> <text>{{aaa.name}}</text> </view>
拿序号
<view wx:for="{{ todos }}" wx:for-item="aaa" > <checkbox checked="{{aaa.completed}}"></checkbox> {{index}} <text>{{aaa.name}}</text> </view> 拿序号并起别名 <view wx:for="{{ todos }}" wx:for-item="aaa" wx:for-index="i" > <checkbox checked="{{aaa.completed}}"></checkbox> {{i}} <text>{{aaa.name}}</text> </view> 打印九九乘法表 <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"> <!-- wx:if 是用来根据一个bool值决定显示或隐藏 --> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view> <!-- 1: 明确页面结构的循环体 2：删除多余的重复内容，只保留一个 3：在剩下的这个价格wx:for属性，属性值等于要遍历的数据源，数据源是数组 4：在这个标签(循环体)内部使用item代表当前被遍历的元素 给被遍历的对象定义名称 wx:for-item 给遍历的下标(索引) 定义名称 wx:for-index --> </view>
显示效果如下:
完
