微信小程序火了,但是怎么搞,你还得清楚这些

2017-1-9 11:43| 发布者: 自媒圈| 查看: 408| 评论: 6|来自: 电脑百事网| 查看评论

等来近一年,微信小程序终于正式发布了,对于开发者朋友来说,今后都可以申请创建自己的小程序。那么微信小程序怎么申请?下面“电脑百事网”小编详细分享下从零开始做一个微信小程序的实战开发教程,希望操作步骤,对初期开发者会有所帮助。

微信小程序开发步骤

微信小程序申请前的准备:

首先,你需要注册一个小程序账号。需要用一个没注册过公众号的邮箱注册。注册过程中需要很多认证,比较繁琐。如果暂时只是试水、没有发布的打算,那么只要完成基本信息填写就可以,不需要完成微信认证。

之后,就可以在公众平台使用注册的帐户进行登录。

然后,在主页面左边列表中点击设置,再设置页面中选开发设置,就可以看到AppID。而AppID 可以用于在开发工具中进行登记,使用开发工具的高级功能。你可以到官网下载开发工具。

开始项目:

打开开发者工具,选择小程序选项,然后直接点击「添加项目」按钮。我们可以在这个步骤,填入刚才注册的时候使用的 AppID。

如果项目目录中的文件是个空文件夹,会提示是否创建 quick start 项目。

选择「是」,开发者工具会帮助我们在开发目录里生成一个简单的 Demo。

这个 Demo 拥有一个完整的小程序的大概框架。

1. 框架

我们首先看一下官方提供的 Demo 含有的目录:

  • app.js:小程序逻辑、生命周期、全局变量。

  • app.json:小程序公共设置、导航栏颜色等,不可以注释。

  • app.wxss:小程序公共样式,类似 CSS 。

小程序页面构成类似这样:

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json

微信小程序中的每一个页面的路径和页面文件名,都需要写在app.json的pages中,且pages数组中的第一个页面是小程序的首页。

这四个文件按照功能可以分成三个部分:

  • 配置:json 文件

  • 逻辑层:js 文件

  • 视图层:wxss.wxml 文件

在 iOS 上,小程序的逻辑代码运行于 JavaScriptCore 中,而在 Android上,这个任务则是交给 X5 内核来完成。

在 开发工具上, 小程序的 JavaScript 代码是运行在 NW.js(Chrome 内核) 中。这也导致开发工具上的效果跟实际效果有所出入。

2. 组件

微信提供了许多组件,主要分为八种:

这其中,包含了view、scroll-view、button、form等普通常用的组件,也提供了地图mapcanvas

组件主要属于视图层,通过 WXML 来进行结构布局,类似于 HTML。样式则通过 WXSS 来定义和修改,它的语法和使用都近似 CSS。

组件使用语法实例:

<view这是一个普通视图view<viewclas="mainView"样式修改过的视图view

3. API

  • 网络

  • 媒体

  • 数据

  • 位置

  • 设备

  • 界面

  • 开发接口

网络请求接口包含了普通的 HTTPS 请求,支持上传、下载、Socket,基本上满足了我们开发中所需要的网络需求。

这些 API 属于逻辑层,写在 JS 逻辑文件中。

使用实例:

wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })

可以到官方文档 – API 查看其它 API 的使用方法。

编译运行

1. 模拟器调试

我们可以在微信提供的开发者工具中,使用模拟器查看小程序运行的效果。

之前我们提过,小程序的运行底层不同,这也导致在模拟器上的效果,会与在手机上运行有些差异。

2. 真机调试

在左边的选项栏中,选择项目,然后点预览会生产一个二维码,用管理员微信号扫一扫,就可以在真机上看实际效果。

最新评论

  • 回复 Richardlalse 2017-9-13 23:49
    is tramadol good for opiate withdrawal
    <a href="http://drugrehabtrustedclinic.com/">alcohol rehab facilities</a>
    tramadol detox method
    [url=http://drugrehabtrustedclinic.com/]rehab addict[/url]
    what happens when you take heroin
  • 回复 FransdfsUtill 2017-9-12 17:39
    casino online
    [url=http://slotsmegacasino.com/]casino usa[/url]
    casino online usa
    <a href="http://slotsmegacasino.com/"> casino online usa</a>
  • 回复 Richardlalse 2017-9-12 00:54
    pot addiction behavior
    <a href="http://drugrehabtrustedclinic.com/">rehab addict</a>
    signs someone's on heroin
    drug addiction rehab centers
    understanding opiate addiction
  • 回复 FransdfsUtill 2017-9-10 09:54
    casino online
    [url=http://slotsmegacasino.com/]casino online usa[/url]
    casino online usa
    <a href="http://slotsmegacasino.com/"> online casino</a>
  • 回复 FransdfsUtill 2017-9-7 14:00
    casino usa
    casino online
    casino online usa
    <a href="http://slotsmegacasino.com/"> casino online</a>
  • 回复 Bradleyhoft 2017-8-19 23:16
    In adding, Hopkins Medical is intricate in the create and issuance of medical supplies and equipment, including but not fixed to babe scales and non-exclusive medical scales, sphygmomanometers, stethoscopes, choose unwavering MRSA kits, throw out kits, thermometers, pulse oximeters and diagnostic supplies. Allina Healthiness Tranquil Oxygen & Medical Tackle is accredited by the Community Health Accreditation Program, Inc.  Houck PM, Bratzler DW, Nsa W, et al  <a href=http://stadiumexperience.com/conference/experiment23/event16/>generic emsam 5 mg without a prescription</a> anxiety therapy.
    MedicinesComplete delivers skilled knowledge for healthcare professionals to lay down and direct medicines safely, promoting first-rate tradition in steadfast care. Contact the Major Medical Supply or visit our showroom in your area with questions.  Kip medications could be ace of them, but they could be addictive  <a href=http://stadiumexperience.com/conference/experiment23/event5/>buy 200 mg supra ...

您需要登录才可以回帖 登录 | 立即注册

返回
顶部