一直在“说”学习微信小程序，但是一直没有学习
为什么会有这个“想法”要学习微信小程序？
因为在过去的某一天，看到了一句话。
苹果的 APP Store，微信的小程序,都是程序员“把自己的同一份时间出售很多次”的绝佳渠道。
在这里验证了一句话：从想法到实践，很难
学习微信小程序，是可以产生睡后收入的。所以这是我学习的动机。
说了一大推废话。下面开始正文。
什么是微信小程序
官网的解释：
小程序是一种全新的连接用户与服务的方式，他可以在微信内被便捷得获取和传播，同时具有出色的使用体验
当微信事实上，连接了这么多用户的时候，成为一个现象级的APP，基于微信的创业，也就意味这你有了巨大的用户量。
本文结构：
1.微信开发者工具 简单介绍
2.创建小程序项目
3.项目结构
4.结构文件类型之间的关联
微信开发者工具介绍
下载地址：官网-下载
在创建时，需要填写开发者ID。开发者ID，需要去注册
在创建时，选择一个空文件夹
创建完以后的目录如下：
项目结构
一个基本的page包含四种类型的文件。
.js 函数
.json 静态数据，在小程序环境中是这样定义
.wxml xml文件
.wxss 样式文件
页面加载时，json中的数据初始化，js可以处理，wxml可以加载到页面。wxss美化页面。
以上四个文件，分为全局配置文件，和page配置文件。
位于根目录下的是全局文件；位于page目录下，是每个页面的配置文件。页面配置文件之间互不影响。
全局的配置文件在于，为你的整个项目制定统一的风格，良好的用户体验。而每个页面的配置文件，在于有了整体的风格以后，为每个页面提供个性化的风格。
结构文件类型之间的关联
.wxss 和 .wxml
微信小程序中的.wxss,.wxml，和css3 html5,基本一样。w3schools上有很详细的教程。
.js 和 .wxml
Page({
/**
* 页面的初始数据
*/
data: {
message: "SuperTrampAI",
text: 'init data',
array: [{ msg: '1' }, { msg: '2' }],
initText:"init text"
}
})
在data中定义的变量，可以在wxml中，以如下方式取到数据
{{message}}
同时，支持多种数据格式
在js中可以定义函数
changeText: function(){
this.setData({
initText:"changeText"
})
}
在wxml中使用：
<view bindtap="changeText">{{initText}}</view>
函数的另外一种使用方式
1.新建一个js文件
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要用到的地方引入
//.js
var common = require('common.js')
Page({
/**
* 页面的初始数据
*/
helloMINA: function () {
common.sayHello('MINA')
},
goodbyeMINA: function () {
common.sayGoodbye('MINA')
}
})
在wxml中使用：
<view bindtap="helloMINA">helloName</view>
.json
作为静态配置文件存在。
在全局的json文件中，可以配置整个项目的样式，超时时间，加载的插件等等。
改变全局json文件中，pages项，第一个页面会优先现实
"pages": [
"pages/main/main",
"pages/index/index",
"pages/logs/logs"
]
sitemapLocation 配置sitemap文件的路径，sitemap.json可以配置是否可以检索
在今天学习即将结束时，脑袋冒出来一问题：现在这个时间点，学习微信小程序，会不会已经晚了？时间点已经过去了？如果，现在学了如何做小程序，是为了给别人去开发小程序，当然红利期已经过去了，该有小程序的公司已经有了，没有小程序的也已经有了。而如果你学习小程序是为了实现自己的想法，是再做增量，基于这一出发点，你的所学不会像flash一样，路径已经淘汰。
免责说明：更详细系统全面的文档说明，请参见官方文档，该文只是为了书面的呈现作者是怎么想的。
网友评论