zoukankan      html  css  js  c++  java
  • 小程序开发快速入门教程(附源码)

    五分钟上手-微信小程序

    1:用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。注册完成之后开始登录。

    5640239-fe89da4a6d6293c1
    image

    2:登录 https://mp.weixin.qq.com

    我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。有了小程序帐号之后,我们需要一个工具来开发小程序。
    根据官方教程进行开发https://mp.weixin.qq.com/debug/wxadoc/dev/

    5640239-6420449f39a5f02f
    image

    3:安装开发工具

    前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!我的电脑是64位的:

    5640239-bb20037f383d611c
    image

    4:安装完成之后

    你的第一个小程序开启:新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在 IDE 预览你的第一个小程序。

    5640239-96feaf1d70db9068.gif
    image.gif
    5640239-6abdcdef21f8dd0e
    image
    5640239-2fb31c1e694d52d7
    image

    5:编译预览

    点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。OK,你已经成功创建了你的第一个小程序,并且在微信客户端上体验到它流畅的表现。

    5640239-170e5475874c254b.png
    图片.png

    小程序初始化目录:

    1:page 页面文件夹 存放项目页面渲染相关文件


    5640239-b6e071a3f3093ca4.png
    图片.png

    2:utils 存放js库和数字格式化文件


    5640239-d19867a06ac74b5c.png
    图片.png

    3: 配置文件


    5640239-24725361773bb62f.png
    图片.png

    我是分割线===开发ing

    接下来就要开始开发了,我是第一次开发微信小程序,所以显得特别的生疏,以至于无从下手,纠结了很久,找朋友要了一套模板,导入自己的小程序开发工具里面,对整个小程序目录文件结构有了一定的了解,就能很快的上手。

    另外也在网站,GitHub上找了很多完整的小程序源码,学习起来速度也是相当快。

    小程序的思想是:小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

    1:第一个简单小程序:极客小寨


    5640239-74d84d2039ca80d2.png
    图片.png

    2:第二个简单小程序:输入网址生成相应的二维码


    5640239-a43cdfdfa8fde511.png
    完成一个最简易的界面

    3:第三个简单小程序:发送祝福


    5640239-b11d4d0095860cc7.png
    图片.png

    4:第四个简单小程序:仿网易云音乐


    5640239-c55b3a2db83a2232.png
    网易云音乐

    示例步骤:

    1:右键键盘打开


    5640239-54b87f5a19b1ecf7.png
    图片.png

    2:把源码复制黏贴进去,替换掉原来初始化目录,点击普通编译,即可查看左侧效果,根据需要,作相应的增删


    5640239-cc4f646f72c18154.png
    图片.png

    到此为止小程序顺利入门,三天上手,接下来就是一系列的边学学习开发文旦边开发边踩坑的过程了,多读小程序源码,想想也不是那么难的一件事情咯

    原文作者:祈澈姑娘
    技术博客:https://www.jianshu.com/u/05f416aefbe1

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 相关阅读:
    大数加法、乘法实现的简单版本
    hdu 4027 Can you answer these queries?
    zoj 1610 Count the Colors
    2018 徐州赛区网赛 G. Trace
    1495 中国好区间 尺取法
    LA 3938 动态最大连续区间 线段树
    51nod 1275 连续子段的差异
    caioj 1172 poj 2823 单调队列过渡题
    数据结构和算法题
    一个通用分页类
  • 原文地址:https://www.cnblogs.com/ting6/p/9725786.html
Copyright © 2011-2022 走看看