小程序学习从入门到熟练教程

前言

小程序学习起来还是比较简单的,算是比较容易入门的一行。由于移动端的发展,人们现在普遍依赖手机,而手机里面玩的最多的就属微信了。总体来说小程序开发需求量还是挺大的。

前端必备基础知识

如果你是0前端经验来做小程序的话,建议你先看一看基础知识
基础知识:

  • html:了解下常用的标签
  • css:了解下常用布局、着重了解下流式布局(小程序上应用的比较多)
  • js:了解下基础语法、表达式

如果你是经验者,写过很多web页面了可以进入下一步。
如果有vue的开发经验更好,小程序的语法与vue的还是有些相似性的。


 

以下资源送给不想去培训班,却想通过自己的努力自学找到工作或是转行的同学,

不打广告,不关注公众号,不需要积分,直接下载。

教程部分

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

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

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

案例部分

各种效果demo,以及成熟的案例

扩展名  应用程序
.plist  application/xml
.json  text/json
.woff  application/octet-stream
.ttf     application/octet-stream
.svg   image/svg+xml
.mp3  audio/mpeg
.ogg   application/ogg
.wav   audio/wav
.m4a  audio/mpeg
.fnt     text/html

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
  }
})

ui页面大致格式如下:

Page({
  data: {
    detail:null,
    title:null
  },
  onLoad: function (options) {
    console.log('hotnews.onLoad');

    var that = this;
    // 加载数据
    var url = 'http://news-at.zhihu.com/api/4/news/'+options.id;
    console.log('url = '+url);
    wx.request({
        url: url,
        header:{"Content-Type":"application/json","Cache-Control":"no-cache"},
        success: function(res) {
            var detail = res.data;
            console.log('data = '+JSON.stringify(detail));
            that.setData({
                detail:detail
            });
        },
        fail:function(error) {
            console.log(error)
        }
    });
    this.title = options.title;
  },
  onReady: function () {
      wx.setNavigationBarTitle({
          title: this.title
      });
  },
})

好了

去下载吧

链接:https://pan.baidu.com/s/102XfjQm7pHEssSdDTucXlA 
提取码:tnqf

猜你喜欢

转载自blog.csdn.net/qq_29194615/article/details/124258584