小程序基础知识梳理

Posted 2021-03-22 笨笨！

微信开发者工具中新建项目

教程：https://blog.csdn.net/michael_ouyang/article/details/54923784

C:UsersAdministratorWeChatProjectsminiprogram-1

 

 1.将test 页面加入 app.json

打开全局文件 app.json，在文件里面添加 "pages/test/test"（加入一条 test 页面所在的目录 ）

2.全局对象获取

在app.js页面中有一个globalData，这是一个全局对象。添加一个属性 info:"你好"

情况一：在非app.js文件的其他js文件中获取

通过getApp()获取全局的实例，就可以获取到全局对象内的资源

在index.wxml文件添加一个button

getApp()获取全局的对象后，就可以获取到app.js的全局属性

app.globalData.info

情况二：在当前app.js文件获取（F5刷新运行项目）：

在当前文件中获取的话，只需要使用this代表当前对象来获取就可以了

6.跳转

wx.navigateTo()和wx.redirectTo()的区别：

wx.navigateTo()是保留当前页面，跳转到某个页面，跳转页面后可以返回上一页。

wx.redirectTo()是关闭当前页面，跳转到某个页面，跳转页面后不能返回上一页。

方法一：index.wxml:

在index.wxml新建一个button组件，并使用bindtap事件绑定一个函数

index.js:在index.js中的Page函数内部，添加changeToTest 函数，函数里面使用wx.navigateTo，写上需要跳转的页面，里面传入的是一个对象，对象内使用url属性，对应的就是需要跳转的页面的路径（注意：这是接收的是一个相对路径，并且页面不需要使用.wxml后缀）

 

方法二：
使用API  wx.redirectTo()函数（按钮同上）

 

方法三：
使用组件  <navigator>

跳转传参

 

 

以wx.navigateTo为例：

上面讲述,wx.navigateTo传入的url是跳转的页面（使用相对路径）

wx.navigateTo({

    url:"pages/home/home"

});

那么参数传递至下一页面，则只需要在路径后面，添加？问号，？后面接的是参数，以key－value的方式。

这里传了个value为2的参数

wx.navigateTo({

    url:"pages/home/home?type=2"

});

然后在home.js中的onLoad()函数中得到值：option.type就可以得到了，如下：

 

onLoad: function (option) {

    this.setData({

        type:option.type,

    });

    console.log(option.type);

}

7.标题栏导航栏

标题栏window
在app.json文件里面，通过window对象里面的属性进行设置

 

 

示例：
app.json：

 

导航

导航栏TabBar

如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

 

Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

 

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

8.作用域和模块化 

文件作用域

在 javascript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

 

示例：

通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如：

 

/* app.js */

App({

  globalData: 1

})

/* a.js */

// 这是局部变量localValue

var localValue = ‘a‘

// 获取app.js的实例

var app = getApp()

// 通过app的示例来操作全局的变量

app.globalData++

/* b.js */

// 在不同的文件中可以重复定义localValue这个变量

var localValue = ‘b‘

// 如果a.js文件先执行，那么b.js获取到的就是a.js执行过的变量数值

console.log(getApp().globalData)

 

 

 

 

 

 

模块化（require()中传入的是一个js文件的相对路径）

我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。示例：

/* common.js */

function sayHello(name) {

  console.log(`Hello ${name} !`)

}

module.exports = { sayHello : sayHello}

在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

/* a.js */

var common = require(‘common.js‘)

Page({

  helloMINA: function() {

    common.sayHello(‘MINA‘)

  }

})

9.数据绑定

{{}}

 

10. 条件渲染(wx:if和wx:for必须分开使用)

<block wx:if="{{boolean==true}}">

    <block wx:for="{{arr}}">

        <view class="bg_black">内容：{{item}}</view>

    </block>

</block>

<block wx:elif="{{boolean==false}}">

    <view class="bg_red">无内容</view>

</block>

1. 列表渲染

 

 

1. 模板，引用

 

1. 选择器

样式导入
用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

页面的顶层是节点，所以作用于整个页面的样式或修改顶层节点样式请使用page选择器。
小程序目前不支持Media Query。