小程序交流群:528215729,加入和小伙伴们一起探讨开发疑难、运营idea吧

admin

admin

发表于 2018-04-14 16:30:47

摘要:┖no.1 ┒微信小程序之Hello World (微信小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信小程序开发者社区,尽在 www.mntuku.cn)

微信小程序

今天开始学习微信小程序,欢迎大家持续关注

MVVM-模型视图视图模型:

    model  view view-model  (DOM 对象的操作==> 只需要绑定的程度)

SPA-单页面应用程序:

    单页面:当用户访问一个项目时,页面只加载一次

    内容的更新:都是在当前加载完成的主体页面中进行数据生成,和页面渲染

    为了方便程序的开发和管理,对于可能存在的多次使用的代码进行了组件化的管理

    组件中的HTML文件不会被直接渲染,会被读取到JS中生成DOM元素,并拼接到主体页面中

    组件中的HTML文件 更像是 模板文件

MVC-模型视图控制器

微信小程序

  • 微信小程序是基于 MVVM 概念 的 单页面应用程序
    • 数据双向绑定
    • 框架核心 DOM 操作
    • 页面组件化 —> 文件夹-文件

接下来我们看看怎么写一个非常diao对代码 hello world

第一 :下载微信开发者工具

这里写图片描述

第二:获取微信小程序的 AppID

    登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。

这里写图片描述

第三:创建项目

这里写图片描述

第四:编写代码

  • 微信小程序是基于 MVVM 概念 的 单页面应用程序
    • 数据双向绑定
    • 框架核心 DOM 操作
    • 页面组件化 —> 文件夹-文件
  • 项目结构

    | pages //存放的是微信小程序的页面组件
    | 组件文件夹
    | .json
    | .js
    | .wxml
    | .wxss
    | 组件文件夹
    | .json
    | .js
    | .wxml
    | .wxss
    | app.js
    | app.json
    | app.wxss
    | app.html —? 确实存在的
    | project.config.json

  • project.config.json 项目配置文件

    • 一般不需要手动修改
    • 项目的名称,版本,代码语法 ……
      {
      “description”: “项目配置文件。”, // JSON文件的注释
      “setting”: {
      “urlCheck”: true,
      “es6”: true,
      “postcss”: true,
      “minified”: true
      },
      “compileType”: “weapp”,
      “libVersion”: “1.5.4”,
      “appid”: “wx2b0457d718a02076”,
      “projectname”: “%E9%9F%B3%E4%B9%90”,
      “condition”: {
      “weapp”: {
      “current”: -1,
      “list”: []
      },
      “search”: {
      “current”: -1,
      “list”: []
      },
      “conversation”: {
      “current”: -1,
      “list”: []
      }
      }
      }
  • app.js
    • 写JS代码的
    • 微信小程序的入口,实现数据定义,事件定义,请求发送……
  • app.json ==> app.config文件
    • 配置文件,小程序的应用配置
    • 可以配置页面名称,导航,分享,功能
  • app.wxss ==> 微信的 ss 文件
    • css 层叠样式表
    • wxss 微信样式表 ==> 基本和CSS一样

具体代码如下

这里写图片描述

js部分

这里写图片描述

博主开通了一个关于前端分享的微信公众号,有兴趣的小伙伴欢迎关注:
公众号:简单的前端

这里写图片描述

不知道能不能推荐微信公众号,如有违反,请告知

18阅读 | 0评论
你的回应
写文章

10536