从零开始学微信小程序开发

从零开始学微信小程序开发–记录

​ 疫情严重，被困在家，利用时间学习微信小程序的开发。经过查看各个demo例子选择了个税计数器这个比较简单的业务来开发实践。

学习步骤

一、准备工作：

下载微信开发者工具。使用测试号创建一个项目。
下载colorUI格式库开发，下载weiUI,
github地址：https://github.com/weilanwl/ColorUI/ 
github地址：https://github.com/Tencent/weui

二、小程序基本情况了解

下面列出小程序开发必须需要知道的内容，大概知道这些就差不多了。学过vue的理解会更快。

项目结构：

• pages 主要是存放各个页面的，每个文件夹中包含四个文件，js主要放你的数据常量/变量，json主要存放引入的组件，wxml就是页面代码，相当于html，wxss就是格式文件
• 在项目根目录下也存在相同的js、json、wxss文件，功能都是一样的，只不过是全局的。而index文件夹下的就是index页面的内容，相当于scoped = index。
• sitemap.json设置微信搜索范围

其他的比如导航栏在app.json中设置啊，背景颜色啊什么的，看看文档大概知道就行，真正需要的时候采取针对学习。

三、开始开发–我们以首页为例子

​ 因为我们使用colorUI，我们需要把下载的zip包中的demo中的colorUI复制到我们项目的根目录中。然后app.wxss中加上：引入colorui相关格式。另外我们还需要引入weiui相关格式：新建文件夹style,放入weiui.wxss文件.

/**app.wxss**/
@import 'style/weiui.wxss';  // 关键引入代码
@import "colorui/main.wxss"; // 关键引入代码
@import "colorui/icon.wxss"; // 关键引入代码

page{
    background-color: #EDEDED;
    font-size: 14px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    height: 100%
}
.page__hd {
    padding: 40px;
}
.page__bd {
    padding-bottom: 40px;
}
.page__bd_spacing {
    padding-left: 15px;
    padding-right: 15px;
}

.page__ft{
    text-align: center;
    padding:0 0 10px;
    padding:0 0 calc(10px + constant(safe-area-inset-bottom));
    padding:0 0 calc(10px + env(safe-area-inset-bottom));
}


.page__title {
    text-align: left;
    font-size: 10px;
    font-weight: 400;
}

.page__desc {
    margin-top: 5px;
    color: #888888;
    text-align: left;
    font-size: 10px;
}
.weui-cell_example:before{
    left:52px;
}
.tabBar{
  font-size: 14px
}

• 创建两个页面：

在app.json中添加如下代码，这样在pages文件夹中会自动增加myself文件夹。

"pages/myself/myself",

• 引入img文件夹和相关图片

详细见项目源代码img文件夹。主要就是selectedHome.jpg、home.jpg、myself.jpg、selectedMy.jpg。这个后面导航栏会使用到。

• 创建底部导航栏

在app.json文件中添加以下代码。值得说的就是：selectedIconPath为被选择时显示的图片路径

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "工资年终奖个税计算器",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "img/home.jpg",
        "selectedIconPath": "img/selectedHome.jpg"
      },
      {
        "pagePath": "pages/myself/myself",
        "text": "我的",
        "iconPath": "img/my.png",
        "selectedIconPath": "img/selectedMy.png"
      }
    ],
    "selectedColor": "#DC143C"
  },

• 复制源码中的index.wxml文件

<view class="page"  xmlns:wx="http://www.w3.org/1999/xhtml"> 
    <view class="weui-panel__hd" ><text class="text-myself">请选择要计算的类别</text></view>
   
    <view class="flex solid-bottom padding justify-around btn-area">
      <button class="cu-btn round circle lg" bindtap="toSalary">工资</button>
      <button class="cu-btn round circle lg" bindtap="toBonus"> 年终奖</button>
    </view>

    <view class="btn-image">
      <button class="btn-share" bindtap="detail" open-type="share"> 
        <image src="/img/share.png" class="image"> 
        </image>
      </button>
      <view class="shareText" >分享好友</view>
    </view>
</view>

就可以看到预览：

四、总结

欢迎大家扫描二维码，项目源码学习。
项目源码:https://github.com/fongfiafia/taxCalculation

我是一个转行+跳槽字节的码农，专注分享转行、跳槽的程序员生活和技术日常。更多内容关注我：