我写小程序像菜虚鲲——1、唱,跳,rap,篮球

17,277 阅读17分钟

引言

大家好,我是练习时长两年半的个人练习生菜虚鲲,我喜欢唱,跳,rap,篮球,Music!

为了避免律师含,就不po鲲鲲的原图咯~

在小作坊待久了,都忘记自己的本职工作当初进来是一枚Android开发了,写写下APP和py脚本,
偶尔帮人修修电脑。感觉如果自己大只点,可能饮水机的水都要我来换了…

因为一些原因,旧APP不再更新迭代了,新的APP没开始做,不想赔钱把我开掉,
就把我晾着摸鱼。而我自己比较腊鸡,感觉出去会找不到好的工作(不想再去
小作坊,一个人玩好累,感觉再这样下去,会废掉…)

晾着摸鱼不做事,工资照发,管理肯定不愿意啊,要给我找点事做做咯:

要不你学下前端吧,做下小程序,后面做APP了,你再回去做APP…

我TM,说得好像学东西不用学习成本一样,特别是跨域,最怕最后四不像,啥也什么都学得半桶水,
如果真转的话,我更想转后端,毕竟前端技术更新换代速度实在是太快了,是真的快,学不来学不来。

唉,自己又不是大神,人在屋檐下,不得不低头,安慰自己:

小程序外包的单子挺多的,毕竟开发一个小程序的成本比APP少太多,很多甲方
爸爸动不动就要做一个小程序,学了小程序,以后可以接点外包苟活下…

自己摸索着玩了一个多星期,有点意思:

老规矩,记录下自己的学习过程,方便自己日后回顾,也方便后来者。看过网上很多
《从零开始学习微信小程序开发》类型的教程,大都废话太多,或者不是真的零基础
入门,学着学着者突然来些高深玩意,看得我头皮发麻读者一脸懵逼,笔者深知自学
循序渐进的重要性。另外,之前群里有小火汁问我学东西为啥那么快,其实,我学东西
还真不快,主要有几点:顺带分享下自己的学习姿势吧~

  • 兴趣驱动:「你想学」而非「要你学」,主动去探索而非被动接受。
  • 专注:心无旁骛,别一下折腾这个,一下子又折腾那个,三分钟热度。
  • 反思总结:及时总结归纳,形成自己的知识脉络,同时反思学习过程中的一些问题。
  • 去实践:你掌握多少知识,取决于你能调用多少,而非记忆了多少知识。
  • :把握一个度,知道自己要学习到什么程度,不要去钻牛角尖,等等。

大概就这些,笔者是前端小白,并不会深刨,只是希望初学者学完这个系列可以撸
出一个简单基本的小程序。现学现卖,难免有错,还望海涵,欢迎前端大神指出。如无
意外,一周1-2更。不要有太多期待,因为还在准备Android面试相关。废话就那么多,
开始本系列教程。

Tips:个人觉得学习小程序最佳的学习方式就是肝官方文档~
微信小程序官网developers.weixin.qq.com/miniprogram…


0x1、你看这个面又长又宽(开发环境搭建)

官网点击:「指南」-> 「开始


1、申请账号

账号可以申请也可以不申请不是一定要申请账号,如果你只是想自己瞎玩不发布的话,可以跳过这一步。
当然,你也可以申请,申请后会给你的小程序分配一个「AppID」,类似于身份标识。
可以在小程序后台,依次点击「设置」->「开发设置」获取到这个「AppID」:


2、下载安装微信开发者工具

官网依次点击「工具」-> 「下载」,或者直接打开下述链接跳转下载:
developers.weixin.qq.com/miniprogram…

用哪个版本看个人喜欢,笔者用的是 开发版,你也可以使用稳定版,下载完以后,
无脑下一步安装即可。安装完后,其实就可以直接进行小程序开发,只是微信开发者
工具自带的IDE比较简陋,没有自带api智能提醒和语法高亮等,写起代码来不是
很顺手,所以一般只是拿微信开发者工具来「看下运行效果」和「调试」,
写代码的话用的看看运行效果,调试,二用第三方的IDE来编写
代码,常见的两款组合:

  • VS Code + minapp插件
  • Sublime Text 3 + Sublime wxapp插件

笔者使用的是前者,接着说下VS Code的下载安装。


3、下载安装VS Code并安装minapp插件

VS Code直接在官网下载就好:code.visualstudio.com/,默认英文。
如果你想使用中文可以按快捷键:

  • Windows 或 Linux => Ctrl + Shift + P
  • Mac => Command + Shift + P

然后在弹出的对话框中输入:「Configure Language」,如图:

接着点击「Install additional languages…」,如图:

点击后左侧会出现一个插件安装的,选择中文,如图:

安装完,提示重启,重启后就是中文了,接着安装一波minapp插件。点击左侧边栏
的第四个图标,然后搜索栏键入「minapp」,然后点击Install进行安装,如图:。

安装后可能需要重启,重启即可。除此之外,还安利一个插件:「wechat-snippet」,
自动生成微信代码片段,如果想了解更多插件可见VS官网:marketplace.visualstudio.com/


0x2、就像这个碗又大又圆(创建项目)

直接打开微信开发者工具,可以「新建项目」或者「导入项目」,填写项目相关的信息,
这里如果你没有申请账号的话可以用随机生成的AppID,如图所示:


0x3、你们来这里吃饭(界面熟悉)

创建后会自动生成相关代码,创建后的页面如图所示:

简单介绍下,圈住的页面内容如下:

简单说下页面中圈住的部分都是些什么:

  • 菜单栏:提供项目,文件,编辑等相关操作,自己点开看就知道了。
  • 视图开关:控制模拟器,编辑器和调试器视图的显示和隐藏。
  • 模拟器:模拟小程序在手机上的界面效果,上面的栏可以进行模拟器的相关配置:
    模拟器分辨率、缩放比例、连接网络方式、模拟操作、是否静音、独立成小窗口。
  • 编辑器-项目文件目录:小程序文件目录,顶部菜单依次为:添加文件、搜索文件、
    从硬盘打开、折叠某个目录,隐藏。
  • 编辑器-文件内容编辑:就是编写代码的地方。
  • 调试器:定制版的Chrome开发者工具,用于调试:页面结构,CSS,抓包,AppData等。
  • 编译相关:可以选择编译选项:普通编译,添加编译模式(直接打开特定页面)或通过二维码编译,点击编译即可进行编译。点击预览可以生成二维码,然后在手机上查看效果。
  • 真机调试:同样是生成二维码扫描看效果,不过多了调试功能。
  • 切后台:切换场景值。
  • 清缓存:就是清理缓存,可以清理:数据,文件,授权,网络,登录状态。
  • 版本管理:小程序项目Git版本管理。
  • 详情:项目的相关信息,项目配置,以及域名信息配置。
  • 页面路径:当前页面的路径,场景值和页面参数。

关于微信开发者工具的界面的简单介绍就到这里,接着我们来说下小程序的基本结构。


0x4、觉得饭很好吃(基本结构)


1、四类文件

小程序一般由下面四类文件组成:

  • json配置文件,页面和开发工具的相关配置。
  • wxml模板文件,堆砌控件形成小程序页面,有点像HTML。
  • wxss样式文件,调整页面样式,有点像CSS。
  • js脚本逻辑文件,完成一些逻辑处理操作,比如发起请求,事件触发等。

简单点说:wxml里写页面,wxss里写样式,js里写逻辑,json里改配置。


2、三个重要的配置文件


开发工具配置:「project.config.json

开发者工具的统一配置,界面设置以及云函数相关,更多可见:
developers.weixin.qq.com/miniprogram…

小程序全局配置:「app.json

比如:页面路径列表,默认窗口,底部tab栏,网络超时等,更多可见:
developers.weixin.qq.com/miniprogram…

单页面配置:「page.json

使用「同名.json」文件来对本页面的窗口表现进行配置,会覆盖app.json的window
中相同的配置项,更多可见:
developers.weixin.qq.com/miniprogram…


0x5、就像我给你们拉面一样很开心(小程序初体验)

接着,通过编写一个简陋的页面,来体验下小程序的开发~

1、全局窗口配置

先来配置一波小程序的窗口,要求如下:

蕾姆蓝背景,白色文字,菜单栏显示抠腚男孩

打开app.json文件,添加下述配置:

"navigationBarBackgroundColor""#5A78EA",
"navigationBarTitleText""抠腚男孩",
"navigationBarTextStyle""white"

编译运行后,效果如图所示:


2、编写简陋页面

接着开始着手编写这个简陋页面,定义一个顶部头像,新建asserts文件夹,
用来存放静态资源文件,接着往index.wxml中添加一个image控件:

<image src="../../assets/codingboy.png" />

编译运行后,效果如图所示:


3、调整样式

可以,很骚气,但是作为头像有点太大了,调整一下它的样式,打开 index.wxss,添加一个类选择器:

.user-icon-image{
    width150rpx;
    height150rpx;
}

image标签设置一下这个选择器:

<image class="user-icon-image" src="../../assets/codingboy.png"/>

编译运行后,效果如图所示:

Tips:这里还可以利用宽高自适应的,即:设置宽度,保持原图宽高比不变,高度自动变化。
为image标签设置属性:mode="widthFix",效果是一样的。


4、获取用户授权

这里有个需求:

如果已经获取了用户授权,就显示微信头像,否则显示这个默认头像

index.wxml中添加一个用于获取用户昵称和头像的按钮:

<button open-type="getUserInfo">获取头像昵称</button>

编译运行后,点击按钮会弹出一个授权对话框:

点击允许即可完成授权,但是授权的信息并没有保存起来。


5、获取授权信息

授权是授权了,但是信息却没有拿到,button有一个属性:bindgetuserinfo
当用户点击按钮时,会返回获取到的用户信息,我们在这里绑定一个保存用户信息
的回调函数,在index.js中添加下述代码直接把授权信息给打印出来:

getUserInfo: function (e{
    app.globalData.userInfo = e.detail.userInfo
    console.log(app.globalData.userInfo)
}

接着index.wxml中绑定一下:

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>

清一波缓存,然后重新编译,点击获取头像昵称的按钮,对话框授权,在Console可以
看到用户的相关信息:


6、保存授权信息

授权信息可以获取到了,接下来我们通过定义一个变量的方式把信息保存下来,
另外,我们还需要定义一个变量作为是否获得授权信息的标记,用于控制显示
微信头像还是默认头像,打开index.js添加下述代码:

Page({
    data: {
        userInfo: {}, //用户信息
        hasUserInfo: false//是否有用户信息
    }
})

修改下getUserInfo函数,修改后的代码如下:

getUserInfo: function (e{
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfotrue
    })
}

另外授权信息,其实可以通过app.globalData.userInfo获取,在程序初始化的
时候在onLoad函数中去获取下,添加一个onLoad函数,代码如下:

onLoad: function (
    if (app.globalData.userInfo) {
        this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfotrue
         })
    }
}

7、wx:if,wx:elif,wx:else判断结构

接着在index.wxml中通过 wx:if 判断是加载默认图还是微信头像,代码如下:

<block wx:if="{{!hasUserInfo}}">
    <image class="user-icon-image" src="../../assets/codingboy.png" mode="widthFix" />
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
</block>

<block wx:else>
    <image class="user-icon-image" src="{{userInfo.avatarUrl}}" mode="widthFix" />
    <text>{{userInfo.nickName}}</text>
</block>

运行后可以看到显示的是微信用户昵称和头像,如图:

接着调整一下样式,外层包一个view,接着让这两个东西居中:

.user-icon-wrapper{
  display:flex;                 
  justify-content: center; 
  flex-direction: column;
  align-items: center

有点挤,顶部加padding,图片圆角,调整背景颜色,index.wxss添加:

page {
  background#f6f6f6;
  position: relative;
  padding-top30rpx;
  color#323233;
}

.user-icon-wrapper{
  display:flex;                 
  justify-content: center; 
  flex-direction: column;
  align-items: center


.user-icon-image
  width150rpx;
  border-radius20rpx;
}

.authorize-button{
  margin-top30rpx;
}

.nickname-text{
  margin-top30rpx;
}

接着修改下index.wxml,代码如下:

<!-- index.wxml -->
<block wx:if="{{!hasUserInfo && canIUse}}">
    <view class="user-icon-wrapper">
        <image class="user-icon-image" src="../../assets/codingboy.png" mode="widthFix" />
        <button class="authorize-button" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
            获取头像昵称
        </button>
    </view>
</block>
<block wx:else>
    <view class="user-icon-wrapper">
        <image class="user-icon-image" src="{{userInfo.avatarUrl}}" mode="widthFix" />
        <text class="nickname-text">{{userInfo.nickName}}</text>
    </view>
</block>

运行结果如下:


8、单机版天气预报(wx:for循环结构)

只是点击授权然后获取头像显示,感觉好low,跟官方的例子有啥区别,加个
天气预报的东东吧,这里采用的天气接口是:魅族天气API,接口地址如下:
aider.meizu.com/app/weather…
访问看下,返回的数据如下:

开发初期,为了提高开发的效率,会先造假数据,前后端约定好接口的返回数据。
由后端写一个接口返回假数据,或者前端本地跑一个mock服务器,也可以直接写
死在程序中。这里为了方便,直接写死,在index.js的page中添加下述数据:

city: '深圳',
province: '广东省',
realtime: {
  img: "1",
  sD: "72",
  sendibleTemp: "25",
  temp: "25",
  time: "2019-04-17 16:35:08",
  wD: "西南风",
  wS: "1级",
  weather: "多云",
  ziwaixian: "N/A"
},
indexes: [{
  abbreviation: "uv",
  alias"",
  content: "辐射较弱,涂擦SPF12-15、PA+护肤品。",
  level: "弱",
  name: "紫外线强度指数"
},
{
  abbreviation: "pp",
  alias"",
  content: "建议用露质面霜打底,水质无油粉底霜,透明粉饼,粉质胭脂。",
  level: "控油",
  name: "化妆指数"
},
{
  abbreviation: "yd",
  alias"",
  content: "天气较好,且紫外线辐射不强,适宜户外运动。",
  level: "适宜",
  name: "运动指数"
},
{
  abbreviation: "xc",
  alias"",
  content: "洗车后,只能保持1天车辆清洁,不太适宜洗车。",
  level: "较不适宜",
  name: "洗车指数"
},
{
  abbreviation: "ct",
  alias"",
  content: "天气较热,衣物精干简洁,室内酌情添加空调衫。",
  level: "热",
  name: "穿衣指数"
},
{
  abbreviation: "gm",
  alias"",
  content: "感冒较易发生,干净整洁的环境和清新流通的空气都有利于降低感冒的几率,体质较弱的童鞋们要特别加强自我保护。",
  level: "较易发",
  name: "感冒指数"
}],

接着index.wxml添加控件:

<button style="margin-top: 50rpx">刷新天气</button>
<view style="height: 100rpx;flex-direction:column;">
  <text>城市:{{city}}</text>
  <text>省:{{province}}</text>
  <text>天气:{{realtime.weather}}</text>
  <text>温度:{{realtime.temp}}°C</text>
  <text>湿度:{{realtime.sD}}</text>
  <text>更新时间:{{realtime.time}}</text>
  <text>风向:{{realtime.wD}}</text>
  <text>风力:{{realtime.wS}}</text>
</view>

运行结果如下:

文字都堆叠到一起了,设置下样式:

.message-text {
  margin-left15rpx;
  display: block;
  margin-top50rpx;
}

接着每个text设置下message-text这个类选择器,运行效果如下:

接着把indexes里的数据也显示出来,通过wx:for循环生成结点:

<block wx:for="{{indexes}}" wx:for-item="item" wx:key="key">
    <text>{{item.name}}:{{item.abbreviation}}</text>
    <text>{{item.content}}</text>
    <text>{{item.level}}</text>
</block>

运行后结果如下:

文本都堆在一起密密麻麻的,写个样式:

.indexes-text {
  display: block;
  margin-left15rpx;
}

.indexes-text-last{
  display: block;
  margin-left15rpx;
  padding-bottom50rpx;
}

运行结果如下


9、网络版天气预报(wx.request发起请求)

单机版的就完成了,接着通过wx.requests来请求接口,实现一个网络版的天气预报。
index.js中新增刷新天气的函数:

refreshWeather: function ({
    var that = this
    wx.request({
      url'http://aider.meizu.com/app/weather/listWeather',
      data: {
        'cityIds''101280601'
      },
      method'GET',
      headers: {
        'User-Agent:''Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36',
        'Host''aider.meizu.com'
      },
      successfunction (res{
        if (res.data.code == 200) {
          that.setData({
            weather: res.data.value[0]
          })
        }
      },
    })
  },

接着按钮设置下点击时触发这个网络请求:

<button style="margin-top: 50rpx" bindtap="refreshWeather">刷新天气</button>

因为接口是http的,还需要微信开发者工具点开详情,勾选下:

接着点击运行,点击刷新天气,在Network选项卡可以看到发出的请求信息:

然后咧,微信小程序的视图层和逻辑层类似MVVM模式,逻辑层只需对数据对象
更新,即可改变视图层的数据数据显示,这里setData后,对应的控件也会改变。
到此一个非常简单的天气预报小程序就完成了。


小结

本节介绍了微信小程序开发环境的搭建,开发一个简易天气小程序体验了一波微信
小程序,相信读者对于微信小程序有个基本的了解了,接下来的章节会慢慢细化
一些知识点,比如控件定位,UI相关,请求封装,开源开发框架WePY等等,敬请期待~


如果本文对你有所帮助,欢迎
留言,点赞,转发
素质三连,谢谢😘~