微信小程序开发教程[Part 2]
微信小程序开发教程[Part 2]

动手写你的第一个小程序

前端程序员是最为「贪婪」的,他们不满足前端开发,便弄出了Nodejs,不满足后端开发,便开始「染指」移动端。

我们把微信小程序类比成「自带后端逻辑」的网页栈是比较合适的,视图层是前端表现部分,逻辑层则包括网页的两个部分,网页显示逻辑和服务器交互逻辑,如果你懂一点MVC的话,逻辑层是包含Controller和Model两个部分,逻辑层一方面控制页面的渲染(C),一方面将数据处理(M)。

逻辑

文件结构

文件结构

打开我们的项目,微信小程序的结构和我们网页开发很是相像,asset文件夹用来放资源文件,pages用来放置页面文件,utils用来放一些工具文件。

除此之外,在根目录下还有有三个配置文件,功能如下:

配置文件

app.js

当小程序启动时,我们想注册哪些参数,进行哪些操作,我们在此文件中完成。

let util = require('/utils/util.js')
App({
  openid: '',
  nickname: '',
  avatar_url: '',
  emojis: util.get_emojis()
})

因为Emoji表情我想在启动之时便注册到全局,以便后续页面使用,如何使用这个全局变量,我们后续再做说明。

emojis: util.get_emojis()

app.json

json文件不用想,那肯定是全局配置文件了,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
  "pages":[
    "pages/landing_page/index",
    "pages/home/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Emojiary",
    "navigationBarTextStyle":"black"
  }
}

用不到那么多配置,现在只用到pageswindow两个配置项,pages用来表示整个小程序由多少个页面组成,默认第一条为启动页面,window用于设置小程序的状态栏、导航条、标题、窗口背景色,具体设置项的意义就不一一赘述了。

apps.wxss

全局的样式,一些全局共用的样式可以写在这里。

页面

我们打开pages文件夹,可以发现,两个页面就是对应的我们两个目录,以启动页landing_page为例,来剖析整个代码。

目录结构

index.wxml & index.wxss

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

通过官方描述我们可以知道,WXML和WXSS其实就是HTML和CSS的变种,WXML集成了组件和一些事件处理,而WXSS保持CSS大部分特性的同时,增加了样式导入,和尺寸单位以此来保证不同分辨率设备能够得到统一的显示效果。

和前端开发一样,我偏向于先用WXML和WXSS实现页面,至于逻辑处理则放到最后再实现。

登陆页

index.js

当我们实现完页面,就该考虑一下,需要什么的逻辑功能呢?我这个登陆页逻辑很简单:

  • Emoji图片是随机的,加载时有动效
  • 拿到微信用户的授权信息
  • 跳转到主页面

在WXML中,标签我们称之为组件,view为最基本的组件:视图容器,你可以理解为,所有可视元素的载体,还有很多其他组件,比如我们要用到的展示Emoji图片的image组件。

<view class="userinfo-box">
    <image class="userinfo-avatar ripple rotateIn" src="" background-size="cover"></image>
</view>

因为Emoji图片的地址是随机的,所以这个地址需要逻辑层处理完给我们,就用到了双向数据绑定,如果你看了Vuejs一定对此不会陌生。

好的,去index.js编写我们的这个逻辑。

let app = getApp()

还记得我们在初始化app.js中注册的全局实例么?我们可以用上面的方法来取得这个全局实例。

data: {
		emoji_url : '/asset/emojis/slightly-smiling-face.svg'
	},

双向数据绑定,视图层中emoji_url和这里的emoji_url是互相绑定的,视图层变量数据发生变化,同时逻辑层的变量值也会随之改变,反之亦然。这里,我给了Emoji图片一个默认的值,会在接下来的页面加载时进行改变。

let emojis = app.emojis
let positive_emojis = emojis['positive']
let emoji_name = positive_emojis[Math.floor(Math.random() * positive_emojis.length)]
this.setData({
	emoji_url : '/asset/emojis/' + emoji_name + '.svg'
})
console.log(this.data.emoji_url)

第1行代码就是拿到全局实例中的emojis变量,第2,3行取得一个随机的表情名。第4行,我们借助this.setData()这个函数,来改变emoji_url的值,log一下该变量的值,没问题。

接下来的代码就是实现我们第二个逻辑:拿到用户的授权信息,这部分代码就不细讲了,如果你不知道此部分的内容,可以参考微信公众平台相关文档

complete: () => {
	// 一秒后跳转到主页面
	setTimeout(() => {
		console.log('jump')
		wx.redirectTo({
			url: '/pages/home/index'
		})
	}, 1000)
}                    

获取到用户的授权信息后,跳转到主页面,大功告成,我们的小程序启动页就搞定了,很简单吧。

后面主页面代码,就不再做过多解释,毕竟该教程还只是一个偏向新手的初级教程,仔细阅读我主页面的代码(并不复杂),和多看官方文档,很容易就上手了。

在下一部分,我会说一说微信小程序开发应该注意什么,哪些Trick,还有我对小程序的看法。


If You Have Any Question, You Can Contact Me Through liam@blue7wings.com, @Blue7Wings, #Liam_Hsia