小程序基础知识梳理

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

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

C:\Users\Administrator\WeChatProjects\miniprogram-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"

});

那么参数传递至下一页面,则只需要在路径后面,添加?问号,?后面接的是参数,以keyvalue的方式。

这里传了个value2的参数

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 tabtab 按数组的顺序排序。

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:ifwx: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。

 

 

猜你喜欢

转载自www.cnblogs.com/benbenjia/p/12050569.html