初入微信小程序

初入微信小程序

小程序在这一两年内发展迅速，因为它无需安装用完即走非常的方便对比应用它体积小启动速度快，内容丰富。除了一些大型游戏或者应用外一些小应用对于微信小程序来说是非常轻而易举的，在走了一遍vue后大致了解和应用以后才来学习微信小程序。这样就会非常容易了解小程序的操作和概念，他们都是mvvn模型视图。具体请点开文档这里就不再搬运

MVC，MVP 和 MVVM 的图示

我们通过下面这几张图初步认识一下什么是小程序//以下是我学习过程做的截图笔记

当你操作完以上步骤以后就可以打开我们的小程序开发工具

界面非常简洁创建项目打开项目不必多说

对于小程序app码需要到小程序网页后台设置那边获取//也可以获取临时体验码快速体验一下

首先我们创建好项目以后他自动创建了一个hello world的demo😂我们已经习惯了万年helloworld

好的为了让自己理解的更好我们把原有的模版给他删的一干二净

接下来我们开始创建他必须要有的东西好吧～～

1
2
3
4
5
6
7
8
9
10
//初始化配置
pages：存放页面使用
	--home 主页页面文件夹
		--home.js			==	.js
		--home.json		==	.json
		--home.wxml		==	.html
		--home.wxss		==	.css
app.js
app.json
app.wxss

创建好结构后我们会看见控制面板上出现了报错红惶惶的贼吓人但是我们不需要太紧张没有人一开始就能做好。我们接着看一下报错内容那是因为我们的json文件不能是空的必须得装点玩意才能让他不闹

1
2
3
{
  "pages":["pages/home/home"]
}

这里装了主页的路由这应该不用解释了吧一目了然

同样我们也给home中的json填上内容

1
2
3
4
5
{
  "navigationBarTitleText":"关于",		//顶部内容
  "navigationBarBackgroundColor":"#fff",	//顶部背景颜色
  "navigationBarTextStyle":"black"	//顶部文字只能是黑或白
}

我们消除了json的报错后会发现js文件也报错了它是没有定义page内容参考文档我们输入page后回车他会自动给我们生成一个模版我们暂时也不需要去改动之间shift+s保存我们就可以看见报错内容消失了，但是我们页面也是空白的难道不是吗？？因为我们还没在.wxml中输入任何内容！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

基础组件分为以下八大类：

当然小程序和html还是有一些不一样滴！view类似于div，其实大部分还是认识的所有没啥毛病就是开发时要记住不要搞混了

小程序视图容器(View Container)：

组件名 说明
view 视图容器
scroll-view 可滚动视图容器
swiper 可滑动的视图容器

小程序基础内容(Basic Content)：

组件名 说明
icon 图标
text 文字
progress 进度条

小程序表单(Form)：

标签名 说明
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
picker-view 内嵌列表选择器
slider 滑动选择器
switch 开关选择器
label 标签

小程序导航(Navigation)：

组件名 说明
navigator 应用内跳转

小程序多媒体(Media)：

组件名 说明
audio 音频
image 图片
video 视频

小程序地图(Map)：

组件名 说明
map 地图

小程序画布(Canvas)：

组件名 说明
canvas 画布

小程序客服会话：

组件名 说明
contact-button 进入客服会话按钮

我们再来看一下微信小程序js的一些交互吧

微信：

1
2
3
4
//插值模版
<view>{{ message }}</view>
//点击绑定
<button bindtap="clickMe">点击我</button>
1
2
3
4
5
Page({
  clickMe() {
    this.setData({message: 'Hello World'})
  }
})

vue：

1
2
3
4
5
<div>{{	message	}}</div>
//未简写
<button v-on:click="clickMe"></button>
//简写后
<button @click="clickMe">打击我</button>
1
2
3
4
5
6
7
8
9
10
11
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    clickMe: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})