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

微信小程序

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

 
 
1
2

MVVM-模型视图视图模型:

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

 
 
1
2

SPA-单页面应用程序：

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

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

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

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

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

 
 
1
2
3
4
5
6
7
8
9
10

MVC-模型视图控制器

微信小程序

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

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

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

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

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

 
 
1
2

第三：创建项目

第四：编写代码

• 微信小程序是基于 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部分

原文地址 ：http://blog.csdn.net/zbwroom/article/details/78192912