精华内容
下载资源
问答
  • 微信小程序开发教程(第1篇)

    万人学习 2016-10-17 08:24:00
    “微信小程序开发教程​”以腾讯官方资料为主,系统讲解微信小程序开发的相关的知识点。 全套课程共3篇 微信小程序实战教程(第1篇)——讲解小程序基础知识点,重点讲解小程序开发工具,视图层(View)和逻辑层(App ...
  • 微信小程序开发教程手册文档

    万次阅读 多人点赞 2018-06-28 14:25:48
    微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...

    微信小程序开发教程文档

    微信小程序是什么微信小程序如何开发微信小程序开发教程有哪些本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志下载源码

    步骤1. 获取微信小程序的 AppID

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

    微信小程序设置

    注意:如果我们不是用注册时绑定的管理员微信号,在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。


    步骤2. 创建项目

    我们需要通过开发者工具,来完成小程序创建和代码编辑。

    开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

    为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

    小程序组件

    项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。


    步骤3. 编写代码

    创建小程序实例

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

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

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

    //app.js
    App({
      onLaunch: function () {
        //调用API从本地缓存中获取数据
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
      },
      getUserInfo:function(cb){
        var that = this;
        if(this.globalData.userInfo){
          typeof cb == "function" && cb(this.globalData.userInfo)
        }else{
          //调用登录接口
          wx.login({
            success: function () {
              wx.getUserInfo({
                success: function (res) {
                  that.globalData.userInfo = res.userInfo;
                  typeof cb == "function" && cb(that.globalData.userInfo)
                }
              })
            }
          });
        }
      },
      globalData:{
        userInfo:null
      }
    })

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

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }

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

    /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    }

    创建页面

    在这个教程里,我们的微信小程序有两个页面,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>

    本例中使用了<view/><image/><text/>来搭建页面结构,绑定数据和交互处理函数。

    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="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>

    logs 页面使用 <block/> 控制标签来组织代码,在 <block/> 上使用 wx:for 绑定 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))
          })
        })
      }
    })

    该微信小程序测试的运行结果如下:

    小程序 运行结果


    步骤4. 手机预览

    微信小程序开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。

    微信小程序预览

    展开全文
  • 微信小程序开发教程之Array数组对象

    万次阅读 2018-01-15 10:34:17
    最新消息,Hi小程序小编了解到,微信小程序开发教程之Array数组对象。 微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。 Array,又称作数组对象我们通常通过 ...

    最新消息,Hi小程序小编了解到,微信小程序开发教程之Array数组对象。

    微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。

    Array,又称作数组对象我们通常通过

    这种方法来创建一个数组对象,便于储存信息,当然,我们也可以通过

    一位数组是person[],那么二维数组呢,则是person[][];是不是很好理解呢

    创建了数组或者是从另外的地方获取到数组对象之后,我们要如何获取数组里固定的信息呢,比如我们要获取数组里的第一个值

    数组对象的一些常用有关方法

    此处通用以上people数组,不再重新定义

    Array.length:

    people.length ->获取people数组的内容长度

    Array.toSting():

    people.toString() ->将数组转换成以,分割的字符串

    Array.valueOf():

    people.valueOf() ->还是返回数组 ,不过在控制台看到的效果会跟toString()一样,此处可以有实例

    Array.join()

    people.join( ) ->数组里的对象会被join括号里的引号进行分割,类似符号替换,请看如下实例

    这样看起来是不是一目了然了

    **Array.indexOf() ->返回括号里的内容在数组里的索引位置,如果不知道啥是索引的请百度

    Array.lastIndexOf()->同楼上一样作用,不过是从最后一位开始索引

    Array.push() ->在数组后面继续插入内容

    Array.pop() ->拿走数组最后一个内容

    Array..shift()->拿走数组的第一个内容 (unshift也是拿走最后一个)

    Array.reverse()->对数组从大到小排列

    Array.sort()->对数组从小到大排列**

    Array.splice(起始位置 , 位数,”增添内容”)->从数组中取出以起始位置开始的位数的内容,并写入增添内容,可用来删除内容与替换,例如people.aplice(1,2,"name")

    展开全文
  • 第5章 小程序基础知识与初识小程序组件 第6章 组件数据、事件与属性 第7章 访问API数据与ES6在小程序中的应用 第8章 流行页面编码与组件的细节知识 第9章 Behavior行为与加入缓存系统优化流行页面 第10章 新版Music...

    【课程内容】

    第1章 导学与申请appkey
    第2章 准备工作
    第3章 小程序的基础知识与新特性
    第4章 flex布局
    第5章 小程序基础知识与初识小程序组件
    第6章 组件数据、事件与属性
    第7章 访问API数据与ES6在小程序中的应用
    第8章 流行页面编码与组件的细节知识
    第9章 Behavior行为与加入缓存系统优化流行页面
    第10章 新版Music组件、组件通信与wxss样式复用
    第11章 Promise正确用法与函数签名设计技巧
    第12章 组件高级应用
    第13章 扩展与总结
    第14章 搜索与高阶组件
    第15章 代码重构与行为抽象
    第16章 高级知识与应用

    【教程下载地址】
    http://www.xuexiluxian.net/weixin-xiaochengxu.html

    展开全文
  • 微信小程序开发教程+工具插件

    千次阅读 2018-11-02 13:15:55
    80G微信小程序开发教程+工具插件 一、零基础全套教程 html5教程 javascript教程 PS视频教程 二、微信小程序视频教程 第一阶段、微信小程序小白全套视频教程   第二阶段、微信小程序进阶全套视频教程 ...

    80G微信小程序开发教程+工具插件

    • 一、零基础全套教程

    html5教程

    最新微信小程序开发80G全套高清视频教程+900多套案例

    javascript教程

    最新微信小程序开发80G全套高清视频教程+900多套案例

    PS视频教程

    最新微信小程序开发80G全套高清视频教程+900多套案例

    • 二、微信小程序视频教程

    第一阶段、微信小程序小白全套视频教程

    最新微信小程序开发80G全套高清视频教程+900多套案例

     

    第二阶段、微信小程序进阶全套视频教程

    最新微信小程序开发80G全套高清视频教程+900多套案例

     

    第三阶段、微信小程序高手全套视频教程

    最新微信小程序开发80G全套高清视频教程+900多套案例

     

    • 三、微信小程序最全案例源码

     

    900多套就不一一截图

    最新微信小程序开发80G全套高清视频教程+900多套案例最新微信小程序开发80G全套高清视频教程+900多套案例

     

    • 四、小程序开发工具及文档

    最新微信小程序开发80G全套高清视频教程+900多套案例最新微信小程序开发80G全套高清视频教程+900多套案例

     

    • 五、相关免费课程整理推荐

    一些免费课程推荐.docx

     

    • 六、微信H5游戏开发

    微信游戏新手视频教程

    最新微信小程序开发80G全套高清视频教程+900多套案例

     

    最新游戏集成包

    最新微信小程序开发80G全套高清视频教程+900多套案例

     

    较早游戏包

    最新微信小程序开发80G全套高清视频教程+900多套案例

     

    单独游戏集成包(有100个)

    最新微信小程序开发80G全套高清视频教程+900多套案例

     

    begin2.0去除授权版

     

    下载地址:百度网盘

    展开全文
  • 7月19日微信小程序联盟更新的小程序开发教程、小程序资讯、小程序demo、小程序实战内容合揖如下:小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答《五十三》手机号码处理为...
  • 微信小程序开发教程

    千次阅读 多人点赞 2021-01-07 16:25:06
    1.目录结构: 一个小程序主体由三个文件组成,必须放在项目的根...小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 示例: { ...
  • 微信小程序开发教程--从零开始

    万次阅读 多人点赞 2018-07-25 16:28:23
    随时随地阅读更多技术实战干货,获取项目源码、学习资料,请关注源代码社区公众号(ydmsq666)、博主...今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个And...
  • 微信战狼计划之小程序开发教程 全集百度云下载小程序开发教程,需要的可以下载下来看看,时崎慕意相关教程目录:43 第三方代码的调试.mp47.8M2018-01-30 16:0842 block标签.mp47.5M2018-01-30 16:0841 用this保留...
  • 微信小程序开发教程系列-序言

    千次阅读 2016-10-01 14:47:00
    随着微信开启小程序内测,有许多开发者关心如何进行微信小程序开发。我在这里会陆续发布一系列的小程序开发教程,欢迎开发者和感兴趣的同学来一起学习探讨。
  • Hi小程序小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序开发教程之获取节点下的小节点。     微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈获取节点下的小节点...
  • http://www.mntuku.cn/index.php/article/show/id-1548 admin 发表于 2017-02-06 12:20:21 AD:靠谱的微信小程序外包开发 ... 小程序开发教程 wx.getImageInf
  • 这篇教程是微信小程序开发教程的第一篇,我会简要介绍下微信小程序开发相关的一些基本知识获取AppID 如果你是收到邀请的开发者,我们会提供一个帐号,利用提供的帐号,登录 https://mp.weixin.qq.com ,就可以在...
  • 全网最详细的微信小程序开发教程

    千次阅读 多人点赞 2019-12-19 17:31:38
    前几天学习了react这个开发框架,了解了JS语言的基本知识。想到最近3年小程序如火如荼的发展,进而决定入坑学习。 微信小程序简介 微信小程序是以微信为运行环境的一种应用...小程序开发方式与 H5 十分相似,用...
  • 初识抖音小程序 1、注册账号 microapp.bytedance.com 了解抖音小程序 抖音小程序是一种新形式的应用程序,小程序无法独立运行,需要有宿主程序。下面是抖音小程序的三个宿主平台: 今日头条 今日头条是一款个性...
  •     微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关心「小程序」的最终形态到底是...开始开发应用号之前,先看看官方公布的「小程序」...
  • 详解微信小程序开发教程

    万次阅读 2016-09-24 09:14:06
    “发布审核”是指由用户发起,将其完成初始化开发小程序提交至腾讯,由腾讯自行或委托第三方对该小程序的合法性、合理性、安全性、稳定性、可操作性、用户体验等各方面,采用包括但不限于开发信息核对、安全测试、...
  • 微信小程序全栈开发,从开发新闻小程序...本教程将和大家从零开始一步一步搭建微信小程序新闻系统,每个章节都会涉及到不同的知识点,等教程学习完你不但掌握了小程序开发全部知识,同时还拥有一个完整作品的开发经验!
  • 小程序开发教程及资源合集

    千次阅读 2018-05-11 11:08:24
    教程对微信小程序做了详细的分析与讲解,由浅入深带你搞定从基础到进阶再到实战所需的所有相关知识与技能。资源包含了从开发CMS系统学起,极客...教程都是完整版,是自学小程序开发的理想的视频教程。点击打开链接...
  • 微信小程序开发教程之组件

    千次阅读 2016-09-24 21:05:09
    微信小程序本质上是对android和ios的接口调用,跟html是不一样的,是没有办法通过 或者其他方式来直接实现换行。 但是可以通过设置父级视图为列布局来实现换行 ;font-size:15px;color:orange;display:...
  • 在开发之前,你需要安装小程序开发工具。你可以直接进行开发者工具下载,根据所使用的操作系统来选择相应的安装包。安装完成后即可打开小程序开发者工具,目前支持手机登录和邮箱登录。 目前抖音小程序开发工具支持...
  • 微信小程序开发教程-手势解锁

    万次阅读 2017-01-05 21:57:43
    下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图: 整个功能基于canvas实现,首先添加画布组件,并设定样式<!--index.wxml--> <canvas canvas-id="id-gesture-lock" class="gesture-lock" bin
  • 微信小程序开发教程-抽屉菜单

    万次阅读 2017-01-10 21:48:45
    抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下 ...
  • 今天我们来说一说微信小程序开发、要想开发一个小程序我们需要微信小程序后台、微信小程序开发文档,微信小程序开发工具,当我们有这些东西的时候,我们就可以进行开发微信小程序,不管是公司要做小程序的项目还是...
  • 提示:微信小程序开发教程链接

    千次阅读 2016-09-22 22:43:42
    全球首个微信应用号开发教程 别的开发者加班的努力成果提示:https://my.oschina.net/wwnick/blog/750055小程序的问答相关微信官网说明文档微信官网说明文档2今天朋友圈刷新了这个小程序的消息。很多开发者在期盼着...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 220,931
精华内容 88,372
关键字:

小程序开发教程