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

admin

admin

发表于 2018-05-19 17:43:10

摘要:学习微信小程序(一) (微信小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信小程序开发者社区,尽在 www.mntuku.cn)

由于公司业务需要,我开始接触微信小程序,这个产品目前已经很成熟,有相应的API和开发工具,本博客将带你和我一起进入微信小程序的世界。
阅读本教程前,您需要了解的知识:熟悉前端页面编写

一、小程序概述

小程序的特性:无须安装、触手可及、用完即走、无须卸载
点击查看官方说明文档

1、产品定位及功能介绍

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,体验比网站好,比下载APP更便捷。

2、体验小程序

下载微信客户端版本号:6.3.27 及以上 下载源码 版本20170111
微信小程序体验

3、小程序的优缺点

通过体验之后我们可以很快的了解到小程序的魅力所在。
我的理解就是:简洁易用,小而美。

     微信小程序是一种介于原生app、和web app的结合体。通过微信进行加载,实现类似原生app的流畅。相对原生app来说,小程序更加轻量、更新实时、跨平台;相对web app来说,小程序资源离线,体验更流畅。微信小程序的设计目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

   对于使用用户来说,小程序安装包<=1MB,下载安装极其快速,以现在的网速来讲,基本上可以忽略了,感观上不会很明显,同时大大解放了手机内存。界面风格统一,反应速度快,保证了良好的用户体验,沿用了微信的设计理念。小程序定位在高频使用场景。体验比网站好,比下载APP更便捷。

   对于开发应用者来说,一次开发,多个平台都能用。不同于像开发手机APP一样,开发Adriond版本又要开发IOS版本,完全一样功能的APP要开发两套系统,开发成本与维护成本颇大。而小程序是依附在微信上运行的,只要安装了微信就可以使用小程序开发出来的应用(直接在微信里面打开使用)。微信小程序提供了详细的 UI、运营等规范,统一用小程序语言进行开发。开发周期短而快,开发成本相对低些,特别是微信已解决了兼容性的问题,而这些对创业公司的MVP产品尤为重要(将产品快速开发推出到市场进行试验。从做生意的角度来考虑,用户在哪里、用户更多时间花在哪里,就应该在哪里构建入口)。

总的优势来讲:低门槛下载,跨平台,开发成本低,体验更流畅,可以使用微信的支付功能

而局限在于:

开发基于微信框架,部分功能受限,不支持现有的其他第三方插件;

小程序页面只能同时打开5个,如果交互流程较长难以支持;

小程序包大小限制为1M(目前),所有只适合轻量级

二、编写小程序前的准备工作

1、小程序注册

注册小程序帐号
在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的“立即注册”按钮。
详情请进入微信小程序帮助文档:

https://mp.weixin.qq.com/debug/wxadoc/introduction/注册小程序帐号

2、下载微信小程序开发工具(IDE)

1)使用官方开发工具

下载地址(1.01.171013):

win64下载地址: https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki
win32下载地址:https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki
mac下载地址:https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki

2)使用Egret Wing第三方开发工具(个人推荐)

下载地址(v 4.0.3):

https://www.egret.com/api/download/index?app=EgretWing&v=4.0.3&f=product

3、了解小程序基本架构和实现机制

1)框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

响应的数据绑定
框架的核心是一个响应的数据绑定系统。

整个系统分为两块视图层(View)和逻辑层(App Service)

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

通过这个简单的例子来看:


<view> Hello {{name}}! view>
<button bindtap="changeName"> Click me! button>
// This is our App Service.
// This is our data.
var helloData = {
  name: WeChat
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: MINA
    })
  }
})

2)关联知识语法

基础:HTML+JS+CSS

进阶:React、Vue

语法:Mustache、XML

规范:CommonJS

3)架构

一个小程序页面包含4个文件:

1.WXML:页面结构 用于创建页面对象,以及处理页面生命周期控制和数据处理

2.JS:页面逻辑 设置当前页面工作时的window的配置

3.WXSS:页面样式 用于定义页面中元素结构,遵循XML语法,不是HTML语法,增加了flex布局

4.JSON:页面配置 用于定义页面样式的,语法遵循CSS语法,扩展了CSS基本用法和长度单位

描述页面的四个文件必须具有相同的路径与文件名。

三、开始测试小程序API组件

1、创建demo项目

开发基本框架(MINA框架) 点击查看高清大图

这里写图片描述

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
点击查看-app()官方说明文档

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
点击查看-page()官方说明文档

页面路由:在小程序中所有页面的路由全部由框架进行管理。
点击查看-路由官方说明文档

2、视图层(WXML)数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:

内容

<view> {{ message }} view>
Page({
  data: {
    message: Hello MINA!
  }
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> view>
Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> view>
Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true:boolean 类型的 true,代表真值。
false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}"> checkbox>

特别注意:不要直接写 checked=”false”,其计算结果是一个字符串,转成 boolean 类型后代表真值。

运算

可以在 {{}} 内进行简单的运算,支持的有如下几种方式:

三元运算

<view hidden="{{flag ? true : false}}"> Hidden view>

算数运算

<view> {{a + b}} + {{c}} + d view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d。

逻辑判断

<view wx:if="{{length > 5}}"> view>

更多请点击查看官方文档

475阅读 | 1评论
你的回应
  • Ellchieby

    2018-06-02 23:40:57 Ellchieby

    Comparaison Cialis Levitra Propecia Pelo cialis Propecia Pill 1 Mg Obtenez Dapoxetine Online No Prescription Generic Viagra Pills