微信小程序开发教程_微信小程序开发教程-微信小程序入门 - CSDN
  • 微信小程序开发实战

    2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发
  • 微信小程序开发全案精讲是一套以案例为主线的课程,课程总共九章,第一章回顾基础知识,后面八章全部是以典型的案例作为讲解,选取了美食类:仿菜谱精灵微信小程序、资讯类:仿今日头条微信小程序、生鲜类:仿爱鲜蜂...
  • 微信小程序开发教程”以腾讯官方资料为主。实现角度出发,以“点餐系统”作为课程案例,讲解微信小程序开发的相关知识点,分享小程序开发经验。 全套课程共2个阶段:微信小程序开发教程(第1阶段)——微信小程序...
  • 微信小程序开发教程​”以腾讯官方资料为主,系统讲解微信小程序开发的相关的知识点。 全套课程共3篇 微信小程序实战教程(第1篇)——讲解小程序基础知识点,重点讲解小程序开发工具,视图层(View)和逻辑层(App ...
  • 从零开始小程序今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个Android工程师啊!所以就让我们从零开始!所以本文非常适合非前端工程师学习!哈哈!都说...

    从零开始小程序

    今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个Android工程师啊!所以就让我们从零开始!
    所以本文非常适合非前端工程师学习!哈哈!都说小程序出来前端会抢移动端饭碗,但是据我所知现在好多学习的都是移动开发工程师,谁抢谁的还不一定呢!
    PS:表问我怎么拿到小程序内测资格的,有种东西叫内部资源!

    • 准备工作
      • IDE搭建
      • 知识准备
    • 从零开始
      • app.js
      • app.json
      • app.wxml
      • app.wxss
    • Hello World
      • 创建程序实例
      • 美化ActionBar
      • 美化页面
      • 配置首页
    • 超级Hello World
      • 事件绑定函数
      • 更新界面数据

    准备工作

    IDE搭建

    就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程

    图片发自简书App


    知识准备

    JavaScrip还是要看看的,推荐教程 廖雪峰大神的博客
    HTML+CSS 大概知道是干啥的就行


    从零开始

    微信小程序中就四种类型的文件

    • js ---------- JavaScrip文件
    • json -------- 项目配置文件,负责窗口颜色等等
    • wxml ------- 类似HTML文件
    • wxss ------- 类似CSS文件

    在根目录下用app来命名的这四中类型的文件,就是程序入口文件。

    app.json

    必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,
    你只需创建这个文件,里面写个大括号就行
    以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。

    app.js

    必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写
    以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

    app.wxss

    这个文件不是必须的。因为它只是个全局CSS样式文件

    app.wxml

    这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

    有了这两个文件你运行程序,IDE就不会报错了,也意味着这是最简单的微信小程序

    Paste_Image.png

    Hello World

    创建程序实例

    app.js文件管理整个程序的生命周期,所以在里面添加如下代码:(输入App IDE会有提示)

    App({
      onLaunch: function () {
        console.log('App Launch')
      },
      onShow: function () {
        console.log('App Show')
      },
      onHide: function () {
        console.log('App Hide')
      }
    })
    

    具体API解释如下


    Paste_Image.png

    美化ActionBar

    json文件负责配置ActionBar颜色,我们只需要在里面添加如下代码即可,下图有参数说明!

    Paste_Image.png
    Paste_Image.png
    {
        "window":{
            "navigationBarBackgroundColor": "#BBDEF8",
            "navigationBarTitleText": "Demo",
            "navigationBarTextStyle":"white"
        }
    }
    
    Paste_Image.png

    现在看ActionBar是不是像那么回事了!好接下来我们继续写我们第一个界面

    美化页面

    美化页面我们用到了 wxml 和 wxss文件
    为了程序代码结构简洁
    我们需要在跟目录下创建一个新文件夹 名字随意,我们这里叫pages
    然后在pages文件夹里再创建新文件夹 名字随意 这里我们叫 index
    然后我们创建index.wxml文件然后在里面写入以下代码

    <view>
        <text class="window">Hello</text>
    </view>
    

    然后创建index.wxss文件然后在里面写入以下代码

    .window{
      color=#4995fa;
    }
    

    然后我们创建 index.js文件
    在文件中输入如下代码(输入Page IDE会有提示)

    Page({
      data:{
        // text:"这是一个页面"
      },
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      }
    })
    

    函数解释如下:

    Paste_Image.png

    配置首页

    Json文件负责配置页面路径
    所以我们在里面加入如下代码
    其中index的含义 其实就是指index.js文件
    这里需要说明一点 pages 里面的路径其实是指向js文件的
    如果一个目录下没有该名称的js文件是会报错的!

    "pages":[
      "pages/index/index"
    ],
    

    完成了!我们来运行程序!

    Paste_Image.png

    超级Hello World

    为了学习事件绑定,以及如何将数据在页面上更新
    我们来做个超级Hello World,就是我点击文字,能让
    它变色!

    绑定事件

    我们打开index.wxml 将里面代码改成这样

    <view>
        <text catchtap="click" class="window">Hello</text>
    </view>
    

    其实也就是加了

    • catchtap="click"

    这两个属性是什么意思呢 别着急 我会一一解释

    Paste_Image.png

    上图展示了事件的一些的属性名称,这里需要注意红框标注起来的内容,区分出冒泡事件和非冒泡事件,其实冒泡事件就是需要往上面一层容器传递这个事件。

    看了这图 我们再来看 catchtap="click" 的含义
    catch 代表非冒泡事件
    tap 代表点击事件
    所以连在一起就是非冒泡点击事件
    那后面那个click是啥
    click 其实只是个变量名字
    我们在index.js需要用这个名字绑定接收事件的函数
    我们打开index.js
    然后添加如下函数

      click:function(){
        console.log("点击了文字");
      },
    

    添加完后代码长这样 红框中就是 添加的这个代码

    Paste_Image.png

    所以其实点击事件的回调函数 就是 catchtap="click"
    中的 click 后面加上 :function() 构成的
    现在我们来运行程序试试 然后点击文字

    Paste_Image.png

    看是不是调用了 click:function 函数 并且打出了log

    好接下来我们写点击一下变色的逻辑
    那如何让一个文字变色呢,当然是css
    所以我们需要再index.wxss 中添加一个样式

    .window-red{
        color:#D23933;
    }
    
    Paste_Image.png

    然后我们进入index.js文件
    你会发现代码里面有个 data:{} 它不是page生命周期函数
    其实他是个变量的数组,这个里面申请的变量都可以在 wxml中使用

    Paste_Image.png

    我们在这里申请一个color

    Paste_Image.png

    color的值就是index.wxss中的样式名称
    然后进入index.wxml中,将class中的值改成 {{color}}

    Paste_Image.png

    其实意思就是 将js文件中变量 color的值在这里使用
    也就是值等于 window
    然后我们再回到index.js文件
    在最上面申请一个变量控制点击
    然后在click:function() 函数中添加如下代码

     click:function(){
        console.log("点击了文字");
          if(flag){
            color = "window-red";
            flag = false;
          }else{
            color = "window";
            flag = true;
          }
          this.setData({
            color
          });
      },
    

    修改完后的代码如图

    Paste_Image.png

    其实就是在点击是后 更换color变量的值 而更换的这个值其实就是样式的名称

    更新界面数据

    这里有个问题 我们更换完值 但是在wxml中不会立即生效
    所以我们需要调用
    this.setData()方法将值同步给wxml 让它立即生效

    好了我们运行程序 点击Hello 看看是不是点一下 变一下颜色!

    111111.gif

    最后再补充一点 index目录下也是可以配置 json文件的
    也就是每个页面都可以配置自己独特的actionbar颜色等等
    这里的配置会覆盖 app.json文件的配置

    最后附上github 地址 https://github.com/pwh0996/WXDemo.git
    最后由于着急睡觉 ,所以错别字比较多,后面整理望大家见谅

    喜欢的话欢迎打赏~!!!我会继续写下去的



    作者:蒲文辉
    链接:https://www.jianshu.com/p/aaef5ceb3936
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • **微信小程序开发教程文档(包括搭建环境)** 从微信小程序的开发文档我们可以知道,微信应用开放的服务和组件包含如下: 视图容器:视图(View)、滚动视图、Swiper 基础内容:图标、文本、进度条 表单组件:按钮...
           **微信小程序开发教程文档(包括搭建环境)**
    

    从微信小程序的开发文档我们可以知道,微信应用开放的服务和组件包含如下:
    视图容器:视图(View)、滚动视图、Swiper
    基础内容:图标、文本、进度条
    表单组件:按钮、表单等等
    操作反馈
    导航
    媒体组建:音频、图片、视频。
    地图
    画布
    文件操作能力
    网络:上传下载能力、WebSocket
    数据:数据缓存能力
    位置:获取位置、查看位置
    设备:网络状态、系统信息、重力感应、罗盘
    界面:设置导航条、导航、动画、绘图等等
    开放接口:登录,包括签名加密,用户信息、微信支付、模板消息

                          **环境搭建**
    

    开发工具下载地址:http://pan.baidu.com/s/1dEXmVjr

    接下来我把安装顺序以及遇到的问题在此详细介绍一下。(接下来按照此步骤安装即可成功(wind7版))

    下载微信小程序开发工具0.7.0版本。上面云盘里有。因为0.9.0版本有登陆验证,直接安装一直登陆不上,一直提示please bind your wechat account to the appid first,下载0.7.0版本后直接安装,安装过程很简单,选择安装目录下一步就可以了,安装成功后登陆进入程序出现,需要微信扫码登录,登录后成功出现如下界面,然后退出。
    然后下载0.9.0版本,云盘里也有。下载后直接覆盖安装就可以了(要覆盖安装),安装后先不用打开开发工具,需要下载三个js破解文件替换掉我们安装程序的对于目录的对应文件。
    下载下图的三个文件
    这里写图片描述
    分别找到下面三个目录替换对应文件即可
    package.nw\app\dist\components\create\createstep.js
    package.nw\app\dist\stroes\projectStores.js
    package.nw\app\dist\weapp\appservice\asdebug.js
    替换文件后即可登录成功了,登录后界面如下
    这里写图片描述
    那么我们直接点击添加项目,点击后界面
    这里写图片描述
    因为我们没有内测账号,这个appid可以随便输入,项目名称,及开发目录就随便写了。
    这里写图片描述
    这里写图片描述
    填好信息后点击添加项目
    这里需要下载一个demo,上面云盘里面有。然后将demo里面的文件,注意不是demo,放到创建的项目里面。不然会报错。
    如下图的错误
    这里写图片描述
    出现错误是因为我们缺少了一些文件。这时我们可以把之前下载的demo下载下来,然后拷贝demo里面的文件,注意不是demo这个文件夹。
    动态图我放到前面了。
    这里写图片描述
    这里写图片描述
    重启
    这里写图片描述
    这时就可以看到demo了。如果想做出自己的小程序,可以去看看开发文档。下面是地址链接:
    简易教程:http://wxopen.notedown.cn/?t=1474537660904
    微信小程序组件:http://weixin-xiaochengxu.shukaiming.com/component/scroll-view.html?t=1474537659739
    开发者工具文档:http://wxopen.notedown.cn/devtools/devtools.html
    常见问题:http://wxopen.notedown.cn/qa/qa.html
    抢先看:微信官方发布的微信应用号(小程序)设计规范:http://www.woshipm.com/ucd/418190.html
    微信小程序开发教程:https://xituqu.com/508.html

    展开全文
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...

    做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。

    微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:

    在这里插入图片描述

    这里就是做微信小程序开发的全部官方文档。

    知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发:

    第一步:

    下载微信小程序开发者工具并安装,下载路径:

    https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

    进到下载界面后,根据自己的操作系统选择相应的链接进行下载,下载完成后进行安装。

    第二步:登录工具

    开发者工具安装完成后我们就可以将其打开,初次打开会需要用微信扫码登录,入下图,用手机微信扫一扫后确认登录就可以了。
    在这里插入图片描述

    第三步:创建一个项目

    登录成功后,如果是第一次使用该工具会弹出创建项目的窗口,如下图:
    在这里插入图片描述
    ​ 在创建过程中,如果选择的本地文件夹是个空文件夹会出来一个勾选项“在当前目录中创建quick start项目”,为方便初学者了解微信小程序的基本代码结构,请勾选此项,勾选后,开发者工具会帮助我们在开发目录里生成一个简单的 demo,如下图:
    在这里插入图片描述

    第四步:项目代码结构解释

    在这里插入图片描述
    点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

    下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

    ​ 1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

    2、​ app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

    3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

    我们注意到,在实例程序的代码中还有2个文件夹,一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹,pages是存放所有页面的文件夹。我们着重讲一下这个pages.

    第五步:小程序页面文件构成

    在这个示例中,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

    每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

    ​ index.wxml 是页面的结构文件:

    <!--index.wxml-->
    <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    本例中使用了、来搭建页面结构,绑定数据和交互处理函数。

    ​ index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {}
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
      }
    })
    

    index.wxss 是页面的样式表:

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    

    页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

    ​ index.json 是页面的配置文件:

    ​ 页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

    ​ logs 的页面结构

    <!--logs.wxml-->
    <view class="container log-list">
      <block wx:for-items="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>
    

    logs 页面使用 控制标签来组织代码,在 上使用 wx:for-items 绑定 logs 数据,并将 logs 数据循环展开节点

     //logs.js
    var util = require('../../utils/util.js')
    Page({
      data: {
        logs: []
      },
      onLoad: function () {
        this.setData({
          logs: (wx.getStorageSync('logs') || []).map(function (log) {
            return util.formatTime(new Date(log))
          })
        })
      }
    })
    

    运行结果如下:
    在这里插入图片描述

    第六步:手机预览(只有获得AppId的才有权限预览)

    ​ 开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。
    在这里插入图片描述
    以上是微信小程序前端开发的基本流程,而实际上要做一个内容可以更新的小程序,单有前端开发是远远不够的,还需要后台开发。后台开发与web开发的后台基本无异,可以选择用java、php、nodejs等任一语言,有一点需要注意的是小程序后台服务器必须是https协议的,这就要求必须购买云服务器并将后台服务器设置成https服务。

    展开全文
  • 在安装完“微信Web开发者工具”之后,通过开发者的... 勾选“在当前目录中创建quick start项目”后,点击“添加项目”按钮,即已成功创建了我们第一个微信小程序项目——Hello WXapplet。 开发者工具操作与使用 ...

     在安装完“微信Web开发者工具”之后,通过开发者的微信扫码进入后,如图。

      

      点击“添加项目”,填入之前获得的AppID(无AppID可忽略),输入项目名称“Hello WXapplet”,选定本地文件夹作为项目目录。

      勾选“在当前目录中创建quick start项目”后,点击“添加项目”按钮,即已成功创建了我们第一个微信小程序项目——Hello WXapplet。

     

    开发者工具操作与使用

      

      开发者工具界面基本分为四大区域:1区“顶部菜单”,2区“导航菜单”,3区“目录文件/模拟运行”,4区“编辑/调试开发”、1区与2区是固定的。3区与4区会根据选择导航菜单区的不同功能或模式有所不同。

      1区“顶部菜单”,“设置”是配置开发机运行程序时如何连接网络。“动作”是指“刷新”、“后退”、“前进”等操作,主要在网页或界面调试时使用。“帮助”是Web开发者工具的版本与版权声明等信息。

      2区“导航菜单”,是开发者经常使用的功能区。特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。

     

     

    编辑功能

      点击编辑按钮,出现如图所示的界面。

      原来的4区部分变成项目的文件列表区及对应文件的代码编辑区,我们也称之为代码编辑器。

      代码编辑器现在支持4种文件的编辑:wxml、wxss、js以及json文件。代码编辑器还提供了较为完善的自动补全功能,大大方便了开发者。

      代码编辑器也支持快捷键操作,部分常用快捷键如下:

        Ctrl+End:移动到文件结尾
        Ctrl+Home:移动到文件开头
        Ctrl+i:选中当前行
        Shift+End:移动到行尾
        Shift+Home:移动到行首
        Ctrl+Shift+L:选中所有匹配
        Ctrl+D:选中匹配
        Ctrl+U:光标回退
        Shift+Al t+F:代码格式化
        Alt+Up,Alt+Down:上下移动一行
        Shift+Alt+Up,Shfit+Alt+Down:向上向下复制一行
        Ctrl+Shift+Enter:在当前行上方插入一行

     

     

    调试功能

      调试功能是开发者检测代码结果实现与排查问题的核心工具,如图。

      4区此时变成调试工具与输出区。模拟器将如实地模拟微信小程序项目在客户端的逻辑与操作表现,绝大部分的功能与API调用均能在模拟器上正确呈现。

      调试工具与输出区的顶部是一行菜单,分别是:Console、Sources、Network、Storage、AppData、Wxml、Senser,最右边的扩展菜单项是定制与控制开发工具钮“┆”。

     Console页:控制台信息页,有两个作用:

     1)开发者直接在此输入代码并调试。

      

     2)显示小程序的错误输出。

      

     Sources页:源文件调试信息页,用于显示当前项目的脚本文件。

      

      

    注意:因小程序框架会对脚本文件进行编译工作,在源文件页面中我们看到的文件其实是经过处理之后的脚本文件。所以我们编写的代码都被包含在define函数中。对于页面(page)的代码,则在打包脚本文件尾部,require函数会完成主动调用动作。

     Network页:网络调试信息页,用于观察和显示每个元素请求信息和套接字(socket)状态等网络相关的详细信息。

     

     Storage页:数据存储信息页,用于显示当前项目使用存储API(wx.setStorage或wx.setStorageSync)接口的数据存储情况。比如在Console中输入:wx.setStorage({key:"name",data:"King"}),则在Storage页面中就可以看到我们存储了一个Key-Value数据。

     

     AppData页:用于调试显示当前小程序项目此时此刻的应用具体数据,实时地回显项目数据情况。我们可以在此处编辑修改数据,反馈到当前界面上去。

     Wxml页:用于帮助开发者调试wxml转化后的界面。通过这里的调试可以看到真实的页面结构及对应的wxss属性,同时可通过修改对应的wxss属性,在模拟器中即时查看修改后的情形。(类似chrome中开发者选项中的Element、IE开发者选项中的DOM Explorer)

     

    项目功能

     导航菜单区的“项目”功能,用来显示当前项目的细节,包括图标、AppID以及目录信息等。

     

    展开全文
  • 本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...

    课程介绍

    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,共 9 篇文章。

    本课程共包含四个部分。

    第一部分(第1-3篇)带你初步了解小程序是什么,然后进行小程序开发的准备工作,从注册账号到安装开发工具一应俱全。工欲善其事,必先利其器。

    第二部分(第4-6篇)。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识,需要掌握的会进行说明,需要扩展的会提供信息的出处。千里之行始于足下。

    第三部分(第7-8篇)通过指南针的例子,介绍一个小程序的实现过程。通过这个实例,综合运用所学知识,使小程序开发能力进一步提高。麻雀虽小,五脏俱全。

    第四部分(第9篇)只包含一篇文章,具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓,全在收口。

    哪怕您事先没有任何微信小程序相关技术的经验,认真学完该达人课之后,您会掌握基本的小程序开发方法,并具备自主扩展知识面,以及进行更高层次开发的能力。

    点击查看课程全部内容

    作者介绍

    薛卫国,现就职于某外企担任架构小组责任人,CSDN 博客专家,长期从事 C++ 开发,精通 UML、设计模式,创办有公众号《面向对象思考》。毕业于东北大学,曾留校在国家重点实验室工作。

    课程内容

    第01课:初识微信小程序

    要火的节奏

    最近有一则来自北京商报的新闻引起了不少人的注意,我们这里选取一部分:

    争夺流量 手机厂商“抱团”对抗微信小程序

    3月20日,小米、中兴、华为等10家手机厂商联合对外宣布,推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下,本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为,对于整个市场来说,流量竞争有促进作用,但微信已经具有较强的用户黏性,十大手机厂商要想争夺用户流量并非易事。

    估计这些厂家的标准出台还需要一段时间,但是有一点可以确定的是:小程序类的开发要火。

    但如果你打开轻应用的文档可以发现两点:

    1.应用文档的信息量还很有限。2.轻应用的架构,采用的技术和微信小程序很相似。

    处于这个目的,作者赶在这个时机制作了本课程,希望可以为潮流加一份力;作为程序员,希望各位可以通过本课程的学习,在有限的时间内为自己添一份技能!

    参考资料:轻应用开发文档

    什么是小程序?

    最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

    当然了,关于玩法等等不是本文的内容,可以参照百度百科

    这就是微信小程序的成功案例了。

    微信小程序简介

    微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。关于小程序,张小龙在他的公开课中有过很详细的说明,大家尽可以到网上去搜,这里不再赘述,只说作者自己的理解。

    微信小程序这个词可以分解为“微信”和“小程序”两部分。

    其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。

    “小程序”是说它首先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。

    另外,微信不会提供类似于小程序商店的地方,需要小程序提供者自己通过二维码,群分享的手段来传播,这就是所谓去中心化的形态。

    微信朋友圈提供了好友之间沟通信息的手段,订阅号提供了面向粉丝推送信息的手段,而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

    小程序相关技术介绍

    本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员,因此在说明微信小程序的同时,对相关技术也将进行相应的介绍。通过这种方式,可使读者能够非常顺利地学习,而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

    微信小程序推出一年多一点的时间,算是一个新事物,但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现,不光是微信小程序,很多类似形态的应用都采用类似的架构:

    1. 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
    2. 使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
    3. 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
    4. 架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

    具体的语法,用途等将会在使用的时候详细介绍,这里只提一下相关技术的基本情况,了解即可。

    换一种说法就是:并不需要另外自己调查,跟着本课程走下去就好。

    JSON

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于 ECMAScript(W3C 制定的 JavaScript 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    XML

    XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。

    在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息,比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术,也是当今处理分布式结构信息的有效工具。早在1998年,W3C 就发布了 XML1.0 规范,使用它来简化 Internet 的文档信息传输。

    CSS

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    JavaScript

    JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    在1995年时,由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

    为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

    学习方法

    微信小程序虽然是新事物,但学习方法却不是新方法。

    我们的套路是:首先生产一个最简单的小程序实例,通过这个实例介绍微信小程序的构造和想法,这算是学习这个活动中“学”的部分。然后扩展这些知识点,通过开发一个简单的小程序的过程来运用这些知识点,这算是“习”的过程。

    这是作者这些年来屡试不爽的方法。

    参考资料

    在学习和开发的过程中,我们主要会参考微信的开发文档。其原因是小程序太新了,相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍,但是说实话,内容并不比微信本身的开发文档更详尽。

    第02课:开发环境的准备

    创建自己的小程序账号

    在开发自己的微信小程序之前,首先需要注册小程序账号,接下来我们一步一步做详细说明。

    打开浏览器,输入:mp.weixin.qq.com。

    因为是第一次使用,所以选择画面右上角的“立即注册”。

    选择左下角的“小程序”方框。

    输入邮箱、密码、确认密码、验证码,之后选择同意协议和条款。当然这里的密码不是邮箱的密码,而是正在申请的小程序账号的密码。

    最后按下“注册”按钮。

    点击“登录邮箱”按钮。打开相应的软件后,应该可以收到下面的邮件。如果没收到的话,建议看一下垃圾邮件,没准儿那里有。

    单击下半部一大片绿色的部分,就可以回到注册界面继续剩下的工作。

    选择主题类型为“个人”,然后输入管理员的姓名,身份证号码。

    输入手机号码并单击“获取验证码”,将手机接收到的验证码输入到短信验证码栏中。

    完成上述步骤,画面下部会出现一个二维码,需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

    如果认证成功,画面会变成下面这个样子。

    点击“继续”按钮。

    意思就是现在后悔还来得及,如果不后悔今后就没法后悔了。我们按下“确定”按钮。

    大功告成!

    小程序管理平台

    账号申请成功之后,就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

    首页

    内容比较简单,主要是表示小程序的实时访问次数和系统公告。

    开发管理

    用户在使用小程序的时候,需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

    过程也不复杂,一共分为三步:上传代码,提交审核和发布小程序。

    用户身份

    这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

    数据分析

    这个画面可以统计小程序的访问数量,对用户来源、性别、年龄分布等进行分析。

    模板消息

    这个画面可以定制微信小程序向客户发送的消息。

    客服消息

    通过这个画面可以指定小程序的客服人员,从而实现小程序的在线客服功能。

    附近的小程序

    当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时,小程序指定地点以后,用户可以通过微信的“附近的小程序”界面发现该小程序。

    运维中心

    一共有两个页面,分别用于查询小程序的错误日志和对客户端进行监控。

    推广

    用来自定义小程序推广关键字。

    设置

    设置分类中一共有五个页面,这里只介绍前两个。

    基本设置

    顾名思义,这里主要是用来设置小程序的基本信息。内容包括:

    1. 设定小程序名称,小程序头像;
    2. 取得小程序码;
    3. 取得认证;
    4. 设定主题信息;
    5. 其他省略。

    开发设置

    这个页面主要负责和小程序开发相关的设定信息,内容包括:

    1. 取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
    2. 生成小程序秘钥。
    3. 指定服务器域名。小程序可以访问外部网站,可以上传和下载文件。但是对象服务器不是任意的,需要在这里指定。
    4. 其他省略。

    其他

    在画面的右上角,有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

    安装开发工具

    小程序账号申请成功之后的工作就是准备开发环境。

    早期的版本在首页分类中有开发工具的下载链接,最近不知道为什么变成了访问次数统计画面。但是没有关系,可以直接点击这里,便可打开下面的下载地址页面。

    根据操作系统选择合适的下载链接。

    下载完成后打开安装程序,首先是开始画面。

    按下“下一步”按钮。

    按下“我接受”按钮。

    指定适当的安装目录后按下“安装”按钮。

    安装中……

    完成!

    接下来就可以开始微信小程序的开发之旅啦!

    第03课:微信开发者工具介绍

    第04课:小程序构成介绍——配置文件的形式和内容

    第05课:小程序构成介绍——WXML 和 WXSS

    第06课:小程序构成介绍——事件处理和数据绑定

    第07课:小程序开发实例——指南针(上)

    第08课:小程序开发实例——指南针(下)

    第09课:发布小程序

    点击查看课程全部内容

    展开全文
  • 做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:...知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发:  /***************
  • 微信小程序(wei xin xiao cheng xu),简称小程序,缩写XCX,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 全面开放申请后,主体...
  • 微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...
  • 最新小程序商城类开发教程: 1微信小程序之侧栏分类 —— 微信小程序实战商城系列(1) 2微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列(2) 3微信小程序之购物数量加减 —— 微信小程序实战商城系列...
  • 微信小程序开发教程-随着智能手机的极大普及,微信程序为开发人员提供了更广阔的开发平台。
  • 这篇教程是微信小程序开发教程的第一篇,我会简要介绍下微信小程序开发相关的一些基本知识获取AppID 如果你是收到邀请的开发者,我们会提供一个帐号,利用提供的帐号,登录 https://mp.weixin.qq.com ,就可以在...
  • 最新消息,Hi小程序小编了解到,微信小程序开发教程之Array数组对象。 微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。 Array,又称作数组对象我们通常通过 ...
  • 前面我们讲了微信小程序开发教程前八章,现在更新完结篇:微信小程序拍照收纳开发以及删除名片等。(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&amp;微信小程序首页面开发,第五章:...
  • 前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序...
  • 微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文...认清微信小程序开发其实,我觉得小程序就是将微信官方提供20+个基础组件(目前有26个)进行排列组合,然后加上一些css样式,对用户的操作进行反馈(调
  • 微信小程序全栈开发,从开发新闻小程序...本教程将和大家从零开始一步一步搭建微信小程序新闻系统,每个章节都会涉及到不同的知识点,等教程学习完你不但掌握了小程序开发全部知识,同时还拥有一个完整作品的开发经验!
1 2 3 4 5 ... 20
收藏数 25,389
精华内容 10,155
关键字:

微信小程序开发教程