微信小程序学习笔记(1) -- 基础知识入门

微信小程序学习笔记(1) -- 基础知识入门

文章目录

​​1.常用api​​​​2.常用ui地址​​

​​根目录​​

​​app.json界面外观​​

​​pages​​​​window​​​​debug:​​

​​app.js:​​​​wxss​​

​​页面结构​​

​​page.json​​

​​标签栏​​

​​三、逻辑层与界面层分离架构​​

​​逻辑层的JavaScript​​

​​演示: getApp​​​​演示 getCurrentPages()​​​​演示符合commonjs规范​​​​演示 wx对象​​

​​界面层（数据绑定）​​

​​数据绑定--元素上绑定​​​​数据绑定--属性上绑定数据​​​​数据绑定--知识补充​​

​​1.在{{}}中写字符串​​​​2.计算变量​​​​3.{{}} 可以解决 语法解析 true /fasle 出现bug的问题​​

​​列表渲染​​

一、简单了解

1.常用api

<​​ "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }

pages

设置页面

window

设置导航栏，设置下拉刷新

debug:

debug: true 调试模式

app.js:

//app.jsvar 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

写一些样式的文件

页面结构

​​覆盖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

App 方法 用于定义应用程序实例对象Page方法 用于定义页面对象getApp 方法 用于获取全局应用程序对象getCurrentPges 方法 用来获取当前页面的调用栈（数组，最后一个是当前页面）wx对象 用来提供核心Api的:专门的页面介绍:​​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:"小胡" } }})

{{message}} {{person.name}}

页面效果:

数据绑定–属性上绑定数据

/**index.wxss**/.hello{ width: 100px; height: 100px; background-color: pink;}

看下效果:

源码地址:

​​world后面有空格。

/**index.wxss**/.hello{ width: 100px; height: 100px; background-color: pink;}.world { background-color:yellow;}

效果:

数据绑定–知识补充

1.在{{}}中写字符串

{{ 'hello' }}

效果(hello不是变量)：

2.计算变量

{{ 111 }}{{ 111 + 999 }}

3.{{}} 可以解决 语法解析 true /fasle 出现bug的问题

举例说明:

{{message}}{{person.name}}{{ 'hello' }}{{ 111 }}{{ 111 + 999 }}{{ 100 > 50 ? '你对了' : '你错了'}}

不加{{}}就会出现问题

居然选中了！！

解决方式就是： false外面包一层 {{}}

列表渲染

1: 明确页面结构的循环体2：删除多余的重复内容，只保留一个3：在剩下的这个价格wx:for属性，属性值等于要遍历的数据源，数据源是数组4：在这个标签(循环体)内部使用item代表当前被遍历的元素给被遍历的对象定义名称 wx:for-item给遍历的下标(索引) 定义名称 wx:for-index

代码演示:

{{message}}{{person.name}}{{ 'hello' }}{{ 111 }}{{ 111 + 999 }}{{ 100 > 50 ? '你对了' : '你错了'}} {{item.name}} 如果全局属性中有item这种关键词，可以使用wxlfor-item去给当前遍历数据起别名 {{aaa.name}} 拿序号 {{index}} {{aaa.name}} 拿序号并起别名 {{i}} {{aaa.name}} 打印九九乘法表 {{i}} * {{j}} = {{i * j}}

显示效果如下:

完

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。