zoukankan      html  css  js  c++  java
  • 小程序基础知识梳理

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

    教程: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"

    });

    那么参数传递至下一页面,则只需要在路径后面,添加?问号,?后面接的是参数,以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。

     

     

  • 相关阅读:
    实验2实验报告
    实验1实验报告
    汇编实验九
    汇编实验5
    汇编实验四
    汇编实验三
    汇编实验二
    汇编实验一
    汇编第一章
    浅谈webpack4.0 性能优化
  • 原文地址:https://www.cnblogs.com/benbenjia/p/12050569.html
Copyright © 2011-2022 走看看