zoukankan      html  css  js  c++  java
  • 微信小程序--helloworld

    小程序使用的是微信自己开发的MINA框架,提供了试图层描述语言。MINA框架中的四种类型的文件:

    • .js文件-基于JavaScript的逻辑层框架

    • .wxml视图层文件-是MINA设计的一套标签语言

    • .wxss样式文件-用于描述WXML的组件样式

    • .json文件-配置文件,用于单个页面的配置和整个项目的配置

    新建项目打开的时候会自动创建一个demo,demo的结构文件树如下:

    初入门-微信小程序开发

    文件树

    3.当中的app.js、app.json、app.wxss是必不可少的,是小程序生成的依赖文件。

    app.js是小程序的脚本代码,用来监听并处理小程序的生命周期函数、声明全局变量。

    app.json是对整个小程序的全局配置,配置小程序是由哪些页面组成,配置小程序的窗口标题、背景颜色等。

    app.wxss是整个小程序的公共样式表。


    Hello world实例分析:

    初入门-微信小程序开发

    app.js

    针对上述代码的API介绍:

    App:注册一个小程序

    onLunch:程序加载时执行的方法

    getStorageSync:以同步的方式获取本地缓存

    setStorageSync:设置缓存

    wx.getUserInfo:获取用户信息


    初入门-微信小程序开发

    app.json

    pages为注册页面的列表,均为相对路径,配置小程序由哪些页面组成,window配置小程序的窗口背景色、配置导航条样式、配置默认标题等。


    来到页面的部分,看看index文件中的内容,有3部分,index.js、index.wxml、index.wxss

    • index.wxml文件

    初入门-微信小程序开发

    作为一个展示页面,作用于HTML相同,index.wxml文件中使用了<view/>、<image/>、<text/>组件来搭建页面的结构,绑定数据和交互处理函数。

    • index.js

    初入门-微信小程序开发

    .js文件是页面逻辑处理层,其中:

    getApp():获取应用实例

    Page:声明页面

    data:定义数据

    bindViewTap:为在view中绑定的是tap事件定义操作方法

    wx.navigateTo:导航到响应页面

    onLoad:定义页面加载时的事件。在这里使用了在全局 app.js 中定义的回调函数,将data中的数据更新,由于双向的绑定,页面中的 userInfo 实例也会更新,显示出您的头像和昵称。

    • index.wxss文件

    index.wxss文件中同样是定义一些样式,写法思路与css文件基本一致,主要不需要去设置屏幕适配问题

    小程序效果展示可以直接在微信开发者工具的模拟器中展示,同时也支持测试预览在手机微信端扫码查看测试。

  • 相关阅读:
    51NOD 1069 Nim游戏
    51NOD 1066 Bash游戏
    51NOD 1058 N的阶乘的长度
    51NOD 1057 N的阶乘
    51NOD 1027 大数乘法
    RMQ 区间最大值 最小值查询
    Codeforces Round #426 (Div. 2) C. The Meaningless Game
    51NOD 1046 A^B Mod C
    OJ上 编译器 G++和C++的区别
    二分暑假专题 训练记录 2017-7-29
  • 原文地址:https://www.cnblogs.com/zytrue/p/8548296.html
Copyright © 2011-2022 走看看