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

2019/6/11 23:58:05 人评论 次浏览 分类:开发资料

引言

大家好,我是练习时长两年半的个人练习生菜虚鲲,我喜欢唱,跳,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{
    width: 150rpx;
    height: 150rpx;
}
复制代码

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,
        hasUserInfo: true
    })
}
复制代码

另外授权信息,其实可以通过 app.globalData.userInfo 获取,在程序初始化的

时候在onLoad函数中去获取下,添加一个 onLoad 函数,代码如下:

onLoad: function () { 
    if (app.globalData.userInfo) {
        this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
         })
    }
}
复制代码

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-top: 30rpx;
  color: #323233;
}

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

.user-icon-image{ 
  width: 150rpx;
  border-radius: 20rpx;
}

.authorize-button{
  margin-top: 30rpx;
}

.nickname-text{
  margin-top: 30rpx;
}
复制代码

接着修改下 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-left: 15rpx;
  display: block;
  margin-top: 50rpx;
}
复制代码

接着每个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-left: 15rpx;
}

.indexes-text-last{
  display: block;
  margin-left: 15rpx;
  padding-bottom: 50rpx;
}
复制代码

运行结果如下:

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'
      },
      success: function (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等等,敬请期待~

如果本文对你有所帮助,欢迎

留言,点赞,转发 素质三连,谢谢:kissing_heart:~

赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?