微信小程序第一天（整体的认识）_微信小程序入职第一天。-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28695619/article/details/54296839

本文介绍了微信小程序的基本概念和技术实现，包括小程序的框架结构、页面配置、生命周期等，并分享了初次开发过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序这个概念，很早之前就听朋友说过了，但是直至今天，在这个小程序上线之际，才下定决心去探索一下里面的技术实现。就张小龙不久前在发布会所说的，致力于打造一个触手可及，一用即走的概念，引发了自己的一阵遐想，说到底还是针对线下特定场景。我预测不了日后小程序会发展成什么状况，但是只要记住一句话，学自己想学的，想自己所想的，做别人没做过的。

如果大家还在疑惑移动开发领域是否被冲击？请大家坚持自己的初心，分好主次，小程序的开发要学，但是也不要盲目。

首先我们学习微信小程序，就跟安卓开发大同小异常，框架很重要，你只需要有js的基础，html和css都会一点点你就能够很轻松的接触了。而微信小程序的框架（Mini is not app）简称MINA框架

现在就开始将一下我今天所遇见的问题吧，刚开始需要经过繁琐的注册过程，注册完之后你下载一个微信开发者工具就能够开始你的微信小程序开发之旅了！

1.因本人这里面没有验证成功，开发的小程序只能预览，不能够上线

2.进去之后你会发现开发工具的界面十分整洁，下面图片是本人对此工具的大致了解；

现在开始我详细介绍一下，首先，js文件是逻辑层，处理事件回调，然后json是配置文件，wxss和wxml是视图，开发工具在运行时候会将它们合成起来，变成一个相当于activity一样的东西。

app.js ,app.json, app.wxss是一个全局配置，我把想成安卓里面的Manifesst文件，里面设置一些全局的配置。而对应pages文件下面的每一个子文件夹子就是页面（view），

假如每一个子视图里面有详细的配置，xxx.wxml 和 xxx.json ,这些配置都会覆盖全局配置。

3.微信小程序的访问是通过路径访问来实现的,这里面配置的是每一个页面的路径，就像安卓里面注册activity一个道理

{"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/welcome/welcome"
  ]}

4.全局视图的层叠样式，基本上大家看名字都知道这个属性的功能。

{"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#6f6f6f",
    "navigationBarTitleText": "HelloWorld",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": "false"
  }
}

5.设置底部tap，pagePath是设置此组件的显示页面，iconPath和selectedIconPath 是设置图片所在路径

"tabBar": {
        "color": "#74777e",
        "selectedColor": "#f06000",
        "borderStyle": "black",
        "backgroundColor": "#fff",
    "list":[{
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"image/orbz.png",
        "selectedIconPath":"image/orbz.png"
      }, {
        "pagePath":"pages/logs/logs",
        "text":"日志",
        "iconPath":"image/orbz.png",
        "selectedIconPath":"image/orbz.png"
      }]
  }

6.就以index.wxml为例，和大部分web工程一样，小程序的默认入口也是index，而这个页面的编写就很像html，<view/>标签替代了<html>,里面很多类选择的内容，当然也有开发，微信小程序官方加入的form表单元素，这里用到了<image/>和<text/>和<button/>

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{titlename}}</text>
  </view>
  <view class="userbutton" bindtap="bindButtonTap">
    <button hover-class="userbuttonPress">{{motto}}</button>
  </view>
</view>

7.逻辑处理代码部分，Onload，OnReady，onShow等就和activity的生命周期差不多。

var app = getApp();
Page({
  data:{
    tips:'title',
    myUrl: '../../image/orbz.png'
  },
  getUserInfo(){
     let that = this;
        app.getUserInfo({
            success (res) {
                console.log(res)
                that.setData({ userInfo: res.userInfo })
            }
        })
  },
  onLoad:function(options){
    console.log('onLoad');
        
  },
  onReady:function(){
    // 生命周期函数--监听页面初次渲染完成
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
  },
  onPullDownRefresh: function() {
    // 页面相关事件处理函数--监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  }
})

因为是第一天来尝试写小程序，我遇到的问题有:

1.如何显示一张图片

2.如何给view添加监听事件

3.如何添加tap底部导航

这些问题就明天继续更新啦。

而详细框架内容可以参考官方框架文档