精华内容
参与话题
问答
  • 微信小程序开发教程--从零开始

    万次阅读 多人点赞 2018-02-27 17:01:13
    从零开始小程序今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个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
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

    展开全文
  • 微信小程序开发实战

    万人学习 2016-09-25 16:55:04
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发
  • 微信小程序开发入门教程

    万次阅读 2017-04-28 20:38:31
    做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:...知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发:  /***************

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

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

     

     

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

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

     /*********************************************************************

    插播:

    微信小程序全套视频教程下载地址:http://pan.baidu.com/s/1gf1KLEj

    本套视频教程包含了微信小程序开发的基础知识,特别适合学习微信小程序开发入门使用,请按照顺序观看学习。

    本套教程原来销售199元,现免费奉送,所有内容都是笔者亲自录制。

    需要课程讲解中用到的示例源码请关注微信公众号:“微little程序”,按照提示获取源码。关注成功后,也可直接点击公众号中的“视频教程”菜单,详细了解获取配套示例源码的方式。

    拿到示例源码后,自己再做尝试,学习会更有效果。

    也可扫描下方二维码关注该公众号:

    ******************************************************************************/

    继续:

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

     

    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>
    复制代码

     

    ​ 本例中使用了<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-items="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>
    复制代码

     

    ​ logs 页面使用 <block/> 控制标签来组织代码,在 <block/> 上使用 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的才有权限预览)

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

     

    本文由微信公众号“微little程序”整理发布,可在微信中搜索公众号“微little程序”关注,也可扫描下面的二维码关注。专注微信小程序领域,发布微信小程序资讯,探讨微信小程序开发技术。

    展开全文
  • 微信小程序开发视频教程全套

    千次下载 热门讨论 2017-12-14 12:57:52
    微信小程序(wei xin xiao cheng xu),简称小程序,缩写XCX,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 全面开放申请后,主体...
  • 从入门到精通的微信小程序开发教程(第三版) 10年的PHP开发经验,期间有负...

    订阅后:请点击此处观看视频课程

     

    视频教程-从入门到精通的微信小程序开发教程(第三版)-微信开发

    学习有效期:永久观看

    学习时长:1254分钟

    学习计划:21天

    难度:

     

    口碑讲师带队学习,让你的问题不过夜」

    讲师姓名:韦心红

    CEO/董事长/总经理

    讲师介绍:10年的PHP开发经验,期间有负责开发过联想集团客服问吧,华为研发体系知识管理社区,华为微博,华为手机花粉论坛。并负责公司核心产品ThinkSNSd研发和担任公司总经理。2014年开始创业,作为CEO创立圆梦云公司和打造weiphp核心产品,目前主攻微信公众号和微信小程序应用与开发和相关技能培训输出。

    ☛点击立即跟老师学习☚

     

    「你将学到什么?」

    微信小程序全栈开发,从开发新闻小程序学起,从实践中学习是开发者最好最快的学习方法。本教程将和大家从零开始一步一步搭建微信小程序新闻系统,每个章节都会涉及到不同的知识点,等教程学习完你不但掌握了小程序开发全部知识,同时还拥有一个完整作品的开发经验!

     

    「课程学习目录」

    第1章:开始入门
    1.课程介绍,定个小目标
    2.开发文档简读,了解全貌
    3.小程序效果图,我们的终极目标
    4.开发者工具及开发环境安装
    第2章:第一个小程序:关于我们
    1.创建项目
    2.编写关于我们布局界面
    3.用变量替换界面里的固定文本
    4.界面美化
    第3章:第三章:新闻列表和内容界面
    1.加入新闻列表和内容界面
    2.为程序加入底部菜单导航
    3.实现新闻列表界面
    4.实现内容详情界面
    5.列表和内容界面美化
    第4章:服务器端部署
    1.本地PHP环境部署
    2.weiphp5.0系统部署
    3.weiphp系统整体功能介绍
    4.创建一个新闻插件
    5.配置新闻数据库模型
    6.新闻内容管理(增删改)
    第5章:小程序与后端系统数据互通
    1.新闻列表数据从后端动态获取
    2.新闻详情内容从后端动态获取
    3.阅读量统计
    第6章:用户体验提升,让小程序高大上起来
    1.列表页面加载更多文章
    2.界面反馈提示
    3.加入加载中的友好提示
    4.返回上一页
    第7章:用户建议反馈,体验表单组件之美
    1.新闻搜索,实现列表数据的过滤功能
    2.创建反馈表单界面
    3.创建反馈表单界面(二)
    4.后端系统创建意见反馈插件
    5.用户反馈的内容保存到后端数据库
    6.使用引用功能分离文档
    7.实现表单编辑功能
    第8章:本地缓存数据
    1.缓存新闻列表数据
    2.缓存新闻内容数据
    3.缓存数据方案优化
    第9章:集成微信开放接口,让功能强大起来
    1.测试号配置
    2.用户信息集成实现
    3.表单反馈自带用户名
    4.学习反馈的常见问题
    5.实现自动获取手机号
    第10章:实现需求--新闻分类
    1.后端系统创建分类插件
    2.配置分类的数据库模型
    3.后台新闻内容管理加入分类信息
    4.小程序列表加入分类选择功能
    5.实现按分类显示列表数据
    6.在列表中实现左右切换列表数据
    第11章:实现需求--新闻广告
    1.后端系统创建广告插件
    2.小程序列表和内容页加上广告位
    3.广告展示量统计
    第12章:实现需求--新闻评论
    1.后端系统导入评论插件
    2.小程序导入评论功能
    第13章:打包发布,让你的作品与亿万用户见面吧
    1.域名申请,备案,及部署
    2.后端weiphp打包部署
    3.https证书部署
    4.小程序上传,提交审核,全网发布
    5.结语

     

    7项超值权益,保障学习质量」

    • 大咖讲解

    技术专家系统讲解传授编程思路与实战。

    • 答疑服务

    专属社群随时沟通与讲师答疑,扫清学习障碍,自学编程不再难。

    • 课程资料+课件

    超实用资料,覆盖核心知识,关键编程技能,方便练习巩固。(部分讲师考虑到版权问题,暂未上传附件,敬请谅解)

    • 常用开发实战

    企业常见开发实战案例,带你掌握Python在工作中的不同运用场景。

    • 大牛技术大会视频

    2019Python开发者大会视频免费观看,送你一个近距离感受互联网大佬的机会。

    • APP+PC随时随地学习

    满足不同场景,开发编程语言系统学习需求,不受空间、地域限制。

     

    「什么样的技术人适合学习?」

    • 想进入互联网技术行业,但是面对多门编程语言不知如何选择,0基础的你
    • 掌握开发、编程技术单一、冷门,迫切希望能够转型的你
    • 想进入大厂,但是编程经验不够丰富,没有竞争力,程序员找工作难。

     

    「悉心打造精品好课,21天学到大牛3年项目经验」

    【完善的技术体系】

    技术成长循序渐进,帮助用户轻松掌握

    掌握微信开发知识,扎实编码能力

    【清晰的课程脉络】

    浓缩大牛多年经验,全方位构建出系统化的技术知识脉络,同时注重实战操作。

    【仿佛在大厂实习般的课程设计】

    课程内容全面提升技术能力,系统学习大厂技术方法论,可复用在日后工作中。

     

    「你可以收获什么?」

    通俗易懂,学习完我就写了第一个自己的小程序

    非常棒的教学视频,代码讲解非常详细,真的学完就能做小程序了

     

    展开全文
  • 实现小程序登陆功能
  • 直都想着手做一个微信小程序,尝试了很多微信小程序开发工具,因为不懂代码,所以尝试的是模板制作类型的小程序开发工具,从界面设计、操作难易程度、功能性上来说,有一款微信小程序开发工具我认为用户体验比较高,...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信小程序开发【前端+后端(java)】

    万次阅读 多人点赞 2018-07-13 22:19:46
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
  • 微信小程序开发教程手册文档

    千次阅读 多人点赞 2018-06-28 14:25:48
    微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...
  • 摘要:微信小程序教程...微信小程序开发教程 微信小程序入门系列 微信小程序入门《六》头像上传微信小程序入门《五》登录注册微信小程序入门《四》本地缓存和搜索(附源微信小程序入门《三》详情页面,上滑加
  • 很多朋友都认为微信小程序申请、部署、发布很难,需要很长时间。 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发、部署、发布的方式。当然,实现的...
  • 微信小程序之授权登录(附完整源码)

    万次阅读 多人点赞 2018-03-21 10:38:05
    个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:... 微信小程序之授权登录 一、前言 由于微信官方修改了 getUserIn...
  • 微信小程序开发入门教程 含视频 有源码

    万次阅读 多人点赞 2017-07-03 10:31:18
    微信小程序开发入门教程  做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:    ...
  • 都是些小程序源码,有的还有后台,适合小白、也适合学过了的、也适合做外包的,要的可以取...https://www.douban.com/group/topic/113284790/o2o微信小程序源码-专门针对o2o类别的小程序源码集合【更新整理中...】ht...
  • Django微信小程序后台开发教程

    万次阅读 多人点赞 2018-10-19 20:38:05
    Django微信小程序后台开发教程1 申请小程序,创建hello world小程序2 添加交互框和按钮3 在服务器配置hello django4 实现计算器接口5 配置服务器将后端与微信小程序连接5.1 uwsgi配置5.2 http协议(80端口)下的...
  • 基于微信小程序的培训机构系统 前言:该系统作为本科毕业设计,可能还有很多的不足。只是当时做这个系统的时候,由于需要使用java语言作为后端实现与微信小程序界面数据交互,看遍网上很多的案例基本后台都是php语言...
  • 微信小程序毕业设计、微信小程序商城毕业设计

    万次阅读 多人点赞 2019-07-04 11:36:36
    微信小程序毕业设计、商城小程序】 该微信小程序商城功能模块包含: 首页、分类、商品详情页面,包含加入购物车、收藏商品、商品评论功能、用户登录、微信登录、订单管理、地址管理;完整的购物流程,商品的加入、...
  • WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀...audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义
  • 微信小程序入门教程+案例demo

    万次阅读 多人点赞 2016-10-31 23:25:21
    微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文...认清微信小程序开发其实,我觉得小程序就是将微信官方提供20+个基础组件(目前有26个)进行排列组合,然后加上一些css样式,对用户的操作进行反馈(调
  • 企业微信小程序开发流程

    万次阅读 多人点赞 2019-07-31 15:01:17
    文章目录背景问题分析处理流程1、小程序基础功能开发,提交审核2、企业微信关联小程序3、获取关联小程序的 Secret,设置可见范围4、修改小程序4.1、判断运行环境4.2、权限校验参考资料 背景 为其他公司开发一个...
  • 《微信小程序》微信小程序开发实例

    千次阅读 多人点赞 2018-04-19 13:44:14
    WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说...audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 swit...
  • 微信小程序商城demo

    万次阅读 2020-05-07 22:55:59
    https://github.com/EastWorld/wechat-app-mall
  • 关于微信小程序文字水平垂直居中

    万次阅读 多人点赞 2018-06-02 22:36:38
    1.用line-height的值和view的height值一样wxml:&lt;view class='container'&gt; 这是个例子 &lt;/view&gt;wxss:.container{ border: 2rpx black solid; width: 400rpx;... line-h...
  • 但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习 新建一个页面的步骤: 1> 必须要创建一个wxml文件和一个js文件。 2> js文件内,需要写上注册页面的Page()...
  • 微信小程序开发教程之Array数组对象

    万次阅读 2018-01-15 10:34:17
    最新消息,Hi小程序小编了解到,微信小程序开发教程之Array数组对象。 微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。 Array,又称作数组对象我们通常通过 ...
  • 摘要:微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、微信小程序技巧合集 微信小程序开发工具 5款微信小程序开发工具使用报告...
  • 微信小程序部署到线上环境

    万次阅读 2018-09-05 12:32:15
    微信小程序部署到线上环境 一.微信小程序申请 申请,并认证(未认证不能发布,认证需要300元,目前只支持企业认证)详细见官网说明。 https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&amp;...
  • 微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个...

空空如也

1 2 3 4 5 ... 20
收藏数 296,189
精华内容 118,475
关键字:

微信小程序开发教程

微信小程序 订阅