┖no.1 ┒微信小程序之Hello World

微信小程序

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

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部分

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

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