微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序

第一天,认识微信小程序,第一个微信小程序


1.什么是微信小程序?
是h5网页嘛?不是
微信张小龙说:
小程序是一种不需要下载安装即可使用的应用，
它实现了应用“触手可及”的梦想，用户扫一扫或者
搜一下即可打开应用。也体现了“用完即走”的理念
，用户不用关心安装太多应用的问题。应用将无
处不在，所示可用，但又无需安装卸载。


微信小程序存在云端对吧.


手机app:一般是native程序,比如用java或ios写的
对吧:需要下载,但是小程序不需要下载.


app分为:
webapp:网页的应用
native app:用java和ios编写对吧
react web:
hybrid:


微信小程序:他是微信发明了一种语言
比如他用wxm代替css对吧.


咱们再总结一下看看:
微信小程序是一种:
web的开发方式,但是是native app的开发体验.


不是HTML5
• 即用即走，随手可得
• 拥有离线能力:h5的离线存储功能,联网的时候可以
               看到页面,离线的时候也可以看到.
               有离线存储功能.


      联网的时候把页面存储在手机端.


• 一次开发,多端兼容,比如微信的Android/ios:
                    上都可以应用这个小程序.
                    
   怎么做到的呢?微信的sdk封装了.
• 优美的操作体验:
  h5的体验不是那么好,特别跟native相比较
  小程序的体验,要比h5不错.


  因为他用一些native框架渲染的.
-----------------------------------------
2.环境安装
下载
https://mp.weixin.qq.com/debug/wxadoc/dev/devt
ools/download.html?t=20161122


下载安装以后,用微信扫一下才能进入.


进入以后选择:本地小程序项目


• 选择对应的系统（win32，win64，mac）安装
• 开发工具：自带，sublime Text
            自带就是(微信提供的这个对吧)
• 小程序的插件安装 
  https://github.com/tc-h5/tc-weapp-snippets
  这个是一个基于sublime的一个小程序的插件
  好,进去点击右边:clone or download
  这样就可以了.选择downloadZIP
  tc-weapp-snippets-master.zip
好下载以后,咱们怎么用?
咱们看看.


1.首先解压得到:tc-weapp-snippets-master
这个文件夹.然后把这个文件夹放到
C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages'
这个文件夹的路径你可以,打开sublime然后在菜单上
找到preferences-->browser packages
就可以找到这个目录了-->然后选择user目录.
C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages\User
2.把解压得到:tc-weapp-snippets-master的文件夹
  放到打开的user文件夹中去.
3.这些是sublime的插件,里面都是有什么呢?
  有小程序提供的一些api,还有一些组件.


3.第一个微信小程序
a.点击微信开发工具,然后点击添加项目,
  然后选择填入一个appid,但如果没有appid的话,
  也可以点击右边的无appid,但是提示部分功能受限
  对吧.
b.如何获取appid:
  去官网:
  https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112
  简易教程-->有介绍如何获得appid
  登录微信:
  https://mp.weixin.qq.com/


  开发者中心,设置里,注意,服务号,可以直接看到
  订阅号,只有认证以后可以看到.坑...
-----------------------------
好看看如何开发:
1.好,咱们填写一下项目名称:
credemo01
2.然后选择保存目录
3.然后选择添加项目
打开界面:
左侧是ui,右侧是代码部分
好,咱们左侧选择编辑,右侧会出现代码编辑窗口,还有代码文件列表
对吧.不过这个编辑器,好像不如咱们的sublime好用,所以
还是建议大家用sublime开发.


左侧还有调试窗口.
好左侧的ui,可以选择,比如iPhone6..等等.
右侧,有wifi,还有2g/3g/4g..这个可以模拟网络情况对吧,测试不同
网络情况下,咱们的项目表现情况.


左侧的项目窗口:
点击打开可以显示开发目录.
下面会有:开启es6转es5:默认勾选
监听文件变化,自动刷新开发者工具,这个很重要要勾选
开发环境不校验请求域名以及TLS版本,这个勾选
---------------------------
监听文件变化,自动刷新开发者工具:对于这一项咱们测试一下:
点击左侧编辑,点击右侧代码文件目录,选择pages/index.js/
修改里面的hello world 删掉d以后,保存,可以看到他就自动刷新了
对吧.
--------------------------
好,开发工具咱们看到这里,然后咱们看看如何用sublime开发
微信小程序,好,用sublime打开,刚刚用微信开发工具新建的
项目,比如:
sublime--->open folder-->找到E:\wxworkspace\credemo01
这个文件夹打开.


好,咱们打开,找到左侧目录,打开pages-->index.js-->修改内容,helloworld
改成-->创梦,永不停息,保存,回到小程序开发工具界面,可以看到
也跟着被改了对吧,所以咱们可以用sublime开发,在微信开发工具中看
效果.


好,介绍一下左侧文件结构:
app.js是写逻辑的
app.json是配置文件
app.wxss是小程序的样式表


好,咱们改改试试:
比如修改:
app.wxss:
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  //修改一下
  //padding: 200rpx 0;-->padding: 0rpx 0;
  box-sizing: border-box;
} 
看看效果,开发工具的左侧ui的头像上去了对吧.
---------------------------------
好,大家注意:
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  以上三个在css中是没有的,他是微信小程序特有的,叫弹性和布局
  后边说.flex布局.


  padding: 200rpx 0;//rpx单位,后面说


支付宝是不是也有小程序了?还没有哈,不过原理掌握了到时候他出
其他的也不在话下.
--------------------------------------------------
好,咱们看看在sublime中打开,app.js
在里面我输入wxapp,回车,就会自动生成代码,这个就是
咱们刚开始装的插件的作用:
App({
    onLaunch: function () {
      
    },
    onShow: function () {
        
    },
    onHide: function () {
        
    },
    globalData: 'I am global data'
  });
这段代码对吧.这些代码是神意思呢?
生命周期对吧,咱们后边讲.
----------------------------------
这里我在app.js中敲入wxpage回车,也有生成很多代码对吧.
Page({
  data:{
    
  },
  onLoad:function(options){
    
  },
  onReady:function(){
    
  },
  onShow:function(){
    
  },
  onHide:function(){
    
  },
  onUnload:function(){
    
  },
  onPullDownRefresh:function(){
    
  },
  onReachBottom:function(){
    
  }
}) 
--------------------------------
好,左侧的utils/util.js是小程序的工具集


左侧pages是页面对吧.


好,咱们怎么用util.js中的方法呢?
比如,我打开pages/logs/logs.js
咱们看看:
//logs.js
var util = require('../../utils/util.js')//1.引入工具集
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
//1.util.formatTime(new Date(log))
//uitl.用点的方式使用工具集
      })
    })
  }
})
--------------------------------
好,注意,咱们在sublime中写的代码和微信开发工具中的代码是不一样的
比如:
credemo01/utils/util.js
sublime显示的:
function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()


  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()




  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}


function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}


module.exports = {
  formatTime: formatTime
}


微信开发工具中显示的:
好,咱们点击左侧调试,然后右边窗口的source,打开
找到util.js咱们打开看看:


//1.可以看到这是编译后的代码,他给添加了这样一句对吧
//
define("utils/util.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,fetch,XMLHttpRequest,WebSocket,webkit,WeixinJSCore,WeixinJSBridge,Reporter){ 'use strict';


function formatTime(date) {
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();


  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}


function formatNumber(n) {
  n = n.toString();
  return n[1] ? n : '0' + n;
}


module.exports = {
  formatTime: formatTime
};
//2.还有这里
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInV0aWwuanMiXSwibmFtZXMiOlsiZm9ybWF0VGltZSIsImRhdGUiLCJ5ZWFyIiwiZ2V0RnVsbFllYXIiLCJtb250aCIsImdldE1vbnRoIiwiZGF5IiwiZ2V0RGF0ZSIsImhvdXIiLCJnZXRIb3VycyIsIm1pbnV0ZSIsImdldE1pbnV0ZXMiLCJzZWNvbmQiLCJnZXRTZWNvbmRzIiwibWFwIiwiZm9ybWF0TnVtYmVyIiwiam9pbiIsIm4iLCJ0b1N0cmluZyIsIm1vZHVsZSIsImV4cG9ydHMiXSwibWFwcGluZ3MiOiI7O0FBQUEsU0FBU0EsVUFBVCxDQUFvQkMsSUFBcEIsRUFBMEI7QUFDeEIsTUFBSUMsT0FBT0QsS0FBS0UsV0FBTCxFQUFYO0FBQ0EsTUFBSUMsUUFBUUgsS0FBS0ksUUFBTCxLQUFrQixDQUE5QjtBQUNBLE1BQUlDLE1BQU1MLEtBQUtNLE9BQUwsRUFBVjs7QUFFQSxNQUFJQyxPQUFPUCxLQUFLUSxRQUFMLEVBQVg7QUFDQSxNQUFJQyxTQUFTVCxLQUFLVSxVQUFMLEVBQWI7QUFDQSxNQUFJQyxTQUFTWCxLQUFLWSxVQUFMLEVBQWI7O0FBR0EsU0FBTyxDQUFDWCxJQUFELEVBQU9FLEtBQVAsRUFBY0UsR0FBZCxFQUFtQlEsR0FBbkIsQ0FBdUJDLFlBQXZCLEVBQXFDQyxJQUFyQyxDQUEwQyxHQUExQyxJQUFpRCxHQUFqRCxHQUF1RCxDQUFDUixJQUFELEVBQU9FLE1BQVAsRUFBZUUsTUFBZixFQUF1QkUsR0FBdkIsQ0FBMkJDLFlBQTNCLEVBQXlDQyxJQUF6QyxDQUE4QyxHQUE5QyxDQUE5RDtBQUNEOztBQUVELFNBQVNELFlBQVQsQ0FBc0JFLENBQXRCLEVBQXlCO0FBQ3ZCQSxNQUFJQSxFQUFFQyxRQUFGLEVBQUo7QUFDQSxTQUFPRCxFQUFFLENBQUYsSUFBT0EsQ0FBUCxHQUFXLE1BQU1BLENBQXhCO0FBQ0Q7O0FBRURFLE9BQU9DLE9BQVAsR0FBaUI7QUFDZnBCLGNBQVlBO0FBREcsQ0FBakIiLCJmaWxlIjoidW5rbm93biIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIGZvcm1hdFRpbWUoZGF0ZSkge1xuICB2YXIgeWVhciA9IGRhdGUuZ2V0RnVsbFllYXIoKVxuICB2YXIgbW9udGggPSBkYXRlLmdldE1vbnRoKCkgKyAxXG4gIHZhciBkYXkgPSBkYXRlLmdldERhdGUoKVxuXG4gIHZhciBob3VyID0gZGF0ZS5nZXRIb3VycygpXG4gIHZhciBtaW51dGUgPSBkYXRlLmdldE1pbnV0ZXMoKVxuICB2YXIgc2Vjb25kID0gZGF0ZS5nZXRTZWNvbmRzKClcblxuXG4gIHJldHVybiBbeWVhciwgbW9udGgsIGRheV0ubWFwKGZvcm1hdE51bWJlcikuam9pbignLycpICsgJyAnICsgW2hvdXIsIG1pbnV0ZSwgc2Vjb25kXS5tYXAoZm9ybWF0TnVtYmVyKS5qb2luKCc6Jylcbn1cblxuZnVuY3Rpb24gZm9ybWF0TnVtYmVyKG4pIHtcbiAgbiA9IG4udG9TdHJpbmcoKVxuICByZXR1cm4gblsxXSA/IG4gOiAnMCcgKyBuXG59XG5cbm1vZHVsZS5leHBvcnRzID0ge1xuICBmb3JtYXRUaW1lOiBmb3JtYXRUaW1lXG59XG4iXX0=
});


其实sublime中显示的编译之前的,咱们要注意sublime和微信开发工具中
编译后的代码是不一样的对吧.


而且注意,结构好像也不一样了:
比如:sublime中结构:
credemo01
  pages
    index
      index.js
      index.wxml
      index.wxss
  logs
      logs.js
      logs.json
      logs.wxml
      logs.wxss
  utils
      util.js
 app.js
 app.json
 app.wxss
---------------------
而微信开发工具的结构是:
注意先选择左侧的编译:
pages
  index
    index.js
    index.js[sm]
  logs
    logs.js
    logs.js[sm]
  utils
    util.js
    util.js[sm]
  appservice
  WAService.js
  app.js[sm]
  asdebug.js
这样的对吧,这是编译后的代码,咱们看跟sublime中的是不一样的.
-------------------------------
好,咱们回过来看:
app.json


{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",//1.这里指定的是界面
    //上的标题,可以修改保存下试试:
    //WeChat-->WeChat123
    "navigationBarTextStyle":"black"
  }
}


可以看到变了对吧WeChat123
--------------------------------
再看看:
pages/index/index.js
//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: '创梦,永不停息',
    //1.motto: '创梦,永不停息',
    //改成text: '创梦,永不停息',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})
----------------------------------
pages/index/index.wxml


 
   
    {{userInfo.nickName}}
 
 
    {{text}}
    //2.{{motto}}
    //改成:
    //  {{text}}
    //可以看到也可以对吧.
    //这两个地方是对应起来的.
    //
 

-------------------------------------------
再比如:
app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    //1.修改一下背景颜色
    //"navigationBarBackgroundColor": "#fff",-->
    //"navigationBarBackgroundColor": "#dfdfdf",
    //看看有效果了对吧.
    //在sublime中改,在微信开发工具中效果
    //
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
---------------------------------
再看我改改标题:
app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "第一个微信小程序",
    "navigationBarTextStyle":"black"
  }
}


看看效果
----------------------------------------------------
字体颜色改改:
app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "第一个微信小程序",
    "navigationBarTextStyle":"black"
    //1."navigationBarTextStyle":"black"
    //-->"navigationBarTextStyle":"blue"蓝色
  }
}
----------------------------