入门微信小程序开发(基础开发篇)

这是我参与新手入门的第2篇文章

中止奋斗，生命也就中止了。——卡莱尔
记得先点赞，在查看哦

寄语

你是否有过下载、安装完成微信开发者工具后，发现自动建立了不少文件？而后一脸懵逼，想下手又不知道从哪里改起？只看见一堆不懂的文件夹或文件名后缀，至于怎么控制，怎么编写，无从下手？没事这篇会带你手把手教你敲代码。若是还没了解或者安装微信开发者工具 请查看这篇如何入门微信小程序开发（了解工具篇）

快速了解文件的做用

要想快速入手开发编程，首先咱们要先知道每一个文件有什么用，如何写才能修改控制页面等(如下都是我的经验描述，如想看官方描述，请点我--小程序文档
开发工具向你扔来一张图片

• 1. app.js
  • 用于小程序启动时会触发它固有的生命周期，经常使用自动登陆或全局初始化函数就是放在onLaunch生命周期内，而globalData是存放全局数据，单个页面js读取globalData时写法getApp().globalData
    

App({
  onLaunch() {
    // 展现本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登陆
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
复制代码

• 2. app.json
  • 主要用于全局配置，例如全局标题、导航条颜色、底部导航栏tabbar，咱们建立文件若是本身建立是否是很麻烦？由于小程序一个页面有四个文件，可是在这里能够输入想要建立页面文件名称便可生成页面须要的所有内容，以下图所示。具体其余配置，请移步到微信文档全局配置

• 3. pages
  • pages文件夹下每一个一个文件都是一个单独的页面，平时的业务逻辑或咱们须要控制页面内容都在这里控制和编码输出效果
  • 每一个页面组成有四个文件：
    • .wxml: 这是一个像H5页面标签存放地方，只不过标签必需要按照微信提供的写，例如view、image等，具体更多文档标签说明
    • .wxss: 这是一个像H5页面css存放的地方，支持大部分css的全部写法，我的认为惟一不一样的是它的单位是rpx，这种单位可以适配不一样手机屏幕，不须要前端同窗本身作rem或者媒体查询等去作适配，很是方便，具体更多wxss文档说明
    • .js: 这个文件和正常H5文件同样，用于写业务逻辑和一些交互逻辑函数等，支持ES6语法，使用仍是很方便的，具体更多支持js文档说明
    • .json：这是一个当前页面配置文件，例如能够配置标题，下拉刷新，到底触发等，实用功能配置，具体更多配置文档说明

看完以上介绍，您大概知道每一个文件的做用是什么了，接下来咱们将要开始代码旅行了~

动手敲代码

先上效果图以下图，如实说就是官方的demo，不要灰心我会详细教你代码是怎么实现的

• 1.咱们先来看看头部标题如何配置
  => 打开pages/index/index.json文件,navigationBarTitleText字段便是标题配置，usingComponents字段是引入组件使用的，代码以下

{
  "navigationBarTitleText": "个人第一个demo",
  "usingComponents": {}
} 
复制代码

• 2.控制页面显示内容，例如图片和文字 => 打开pages/index/index.wxml文件, 其中{{userInfo.nickName}}是一种语法，{{}}是固定语法（固然语法还有不少例如条件语法wx:if="{{}}"等），userInfo.nickName内容来自index.js里面,而class是类名，来自index.wxss文件，模仿一下便可获得你的第一个代码显示，若是想查看更多语法，点我，代码以下

index.wxml部份内容

<view class="container">
  <view class="userinfo">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
复制代码

index.wxss部份内容

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.usermotto {
  margin-top: 200px;
}
复制代码

index.js部份内容

data: {
    motto: 'Hello World',
    userInfo: {
          avatarUrl: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'
        },
}
复制代码

=> 若是想跳转第二个页面，在index.wxml文件里面，增长绑定事件bindtap="bindViewTap",其中bindtap是小程序固有语法表示点击事件绑定更多绑定事件用法点我，bindViewTap是自定义函数名称，而后在.js文件里面写该函数名称便可，跳转须要调用微信提供的apiwx.navigateTo,url则是你第二个页面的文件路径，代码以下，更多api文档点即查看

bindViewTap() {
   wx.navigateTo({
     url: '../logs/logs'
   })
 }
复制代码

总结

恭喜您当你看完这些，你已经大概知道怎么使用开发工具，怎么编程写代码，已经能够入手成为小程序小白了， 若是你以为很懵逼也很正常，俗话说：熟能生巧，剩下须要你用大量的时间去操做和写，想成为高手必需要动手去写，看永远都解决不了你成为高手的梦想，加油~
下一篇标题待定,会写一些经常使用的组件或api等

俗话说：为人点赞，手有余香。麻烦动动小手手，给个赞在走~