初步认识微信小程序开发

最新推荐文章于 2023-07-06 08:15:00 发布

'青山'

最新推荐文章于 2023-07-06 08:15:00 发布

阅读量537

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/maoer66/article/details/106179439

版权

- 前言

如果你是跟我十天前一样对微信小程序一无所知的你那么你就来看一下这篇文章。当然这里不感兴趣的你可以跳过
=>{		为了凑字数，还是写点口水话。
首先说一下微信小程序的好处在哪里，在这里我就不罗嗦了。微信小程序的好处说简单点就是（免安装，成本低）：
免安装=>顾名思义就是不用像手机app那样要去应用商店下载，然后在安装，才能使用，微信小程序是不需要的。直接在微信里面打开，用完就走就可以了，这样的好处当然也能给予我们的手机内存得到释放。
成本低=>这个成本低，主要体现在了哪里呢？当然就是推广成本了啊；现在满大街都是扫码送小礼品什么的，扫码注册微信小程序什么的，当然微信推广途径可以通过附近小程序进行查找，还有小程序搜索，然后就是绑定微信公众号，还有就是扫码进入这些方面。
}

- 可能你会问我开发微信小程序需要会那些开发语言呢?

那我就给你说以下：
=>HTML/CSS/JavaScript 这三门语言是必须要会的吧，当然在微信小程序开发当中HTML中的标签，在微信小程序中是用不了的，HTML的语法和微信小程序开发的语法及其的相似，可以说一摸一样，但是也可以说不一样。css样式这个在微信小程序当中的语法也是差不多全部相同，当然JavaScript就不用说了，这语言在前端横着走。
=>在这里我说一下，如果你有过vue开发经验学习微信小程序的话相对来说比较简单一点。当然也必须的要知道ES6语法。

开发小程序前期准备

开发小程序前期你需要准备一些什么呢？

首先需要申请帐号: { https://mp.weixin.qq.com/wxopen/waregister?action=step1
这个就是申请账号的连接地址，
当然也能在微信小程序官网进入：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

这个页面我就不用太罗嗦了，首先填写信息了，微信后给你发一封邮件点开激活就行了。

然后登录就能到这个页面了，这个页面就是后台管理你的小程序域名配置，发布上线等一系列操作的页面。

当然这时候你就可以下载微信开发者工具了，{ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
}这个就是下载开发者工具的链接了，根据你的电脑来选择下载吧！
开发者工具如何使用我就不说了吧，我就直接说里面的文件吧！
对于创建文件的时候有一个AppID需要填写，这个就是上面这个公众平台里面点击开发=>然后点击开发者设置，你就能看见了，复制这个AppID粘贴到创建页面上去就能创建啦！
在创建的时候还需要注意，保存目标文件只能是一个空文件夹。如果你保存的文件夹不是空文件夹是创建不成功的。

app.json
=>app.json是当前小程序的全局配置，抱愧小程序所有的页面路径，界面表现，网络超时时间、底部的导航栏等。配置内容如下:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "指南",
      "iconPath": "images/ic_home_normal.png",
      "selectedIconPath": "images/ic_home_pressed.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "API",
      "iconPath": "images/ic_home_normal.png",
      "selectedIconPath": "images/ic_home_pressed.png"
    }]
  },
}

简单说一下这些含义：
=> pages字段-就是小程序页面的路径，就是为了让微信客户端知道当前你的小程序页面定义在那个目录。如果你有过vue.js开发经验的这里你可以把它叫做路由。
在pages中编写了一个路径之后保存这个编辑器就会自动帮你生成文件夹。
=>window 字段-定义小程序所有页面的顶部的背景，文字颜色定义等。
=>tabBar字段-定义小程序底部导航栏(注意！注意！注意！至少要有2个Tabbar项，最多5个Tabbar项)
如下图：
在这里插入图片描述
下面我就来为你们介绍这三个字段怎么用：
pages字段=>

 "pages":[
    "pages/logs/logs",
    "pages/index/index"
  ],

这个文件的路由就没有什么好说的啦，就是pages文件下的index文件下的index.wxml渲染页面

window-字段=>

"window":{
    "backgroundTextStyle":"light",  //下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#0f0", //导航栏背景色
    "navigationBarTitleText": "WeChat", //	导航栏标题文字内容
    "navigationBarTextStyle":"black" //导航栏标题颜色，仅支持 black / white
  },

当然远远不止这些API还有很多API我这就就是把常用的写在了上面。

tabBar-字段 =>

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index", //所渲染页面路径
      "text": "指南", //Tabbar项的标题
      "iconPath": "images/ic_home_normal.png",//Tabbar项未选中的图片路径
      "selectedIconPath": "images/ic_home_pressed.png" //Tabbar项选中时的图片路径
    			 上面这两个图片的路径:建议使用绝对路径，相对路径要相对于组件所在目录的。
    },{
      "pagePath": "pages/logs/logs",
      "text": "API",
      "iconPath": "images/ic_home_normal.png",
      "selectedIconPath": "images/ic_home_pressed.png"
    }]
  },

这里的配置文件时json文件格式要注意json文件语法。这里我就不多讲json文件的语法，后面我会专门写json文件语法格式的文章。

.wxml 模板
做过前端开发的人都知道，网页编辑采用的是HTML+CSS+JS这样的组合，其中HTML是用来描述当前这个页面的结构。CSS是用来装饰页面的样子，JS就是用来处理这个页面和用户的交互。同样在微信小程序中，WXML文件就是用来描述当前这个页面的结构，WXSS是用来装饰页面的样子,JS就是用来处理这个页面和用户的交互，当然json就是用来配置当前页面的文件了。
我们来看WXML：
这里的代码我就随便复制了一块过来，它和HTML及其相识，都是由标签、属性等等构成，但是也有很多不一样的地方：
比如说标签名，在HTML中常见的标签就是div span p h1 标签的使用方法是一样的，渲染方式也是一样的。
还有下面的wx:if="{{!hasUserInfo && canIUse}}"这种，可能的小伙伴看到都蒙蔽了这是什么垃圾，当然你有过vue开发经验的，可能就明白这是一个if语句而{{}}这个双大括号，就是称为数据绑定，也可叫做插值表达式。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达
在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。微信小程序的框架也是用到了这个思路

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

WXSS 样式
wxss具有css大部分特征，小程序在wxss也做了一些扩充和修改
1、增加的尺寸单位（rpx）开发者需要考虑到不同设备的屏幕会有不同的宽度和设备像素比。所以就要采用技术来进行比例换算。
2、提供的全局样式和局部样式这个就是和前面说到的app.json，和页面中的json文件的概念相同。你也可以写一个全局样式用作小程序的所有页面，局部样式就只用做当前页面。
当然在小程序中使用不方式就是flex布局。

.movie{
  height: 300rpx;
  display: flex;
  padding: 10px;
  border-bottom: 1 px solid #ccc;
}
.movie-img{
  width: 200rpx;
  height: 100%;
  margin-right: 20rpx;
}

js交互
一个小程序仅仅只有界面展示是不够的，还需要和用户做交互，就比如说你需要点击一个按钮，小程序需要做些什么响应式操作，这时候就需要js脚本来处理用户的操作。

当用户点击button时我希望在页面显示maoer66,于是就在button上面又一个bindtap属性绑定一个事件clickMe，然后就需要一个容器view去装载它，而容器里面又需要一个{{msg}}数据动态绑定，通过js中的clickMe方法中的this.setData()方法进行赋值。然后wxml页面渲染出msg，这时候就能在页面看到，Hello maoer66了

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

Page({
  clickMe: function() {
    this.setData({ msg: "Hello maoer66" })
  }
})

我们来了解一下，小程序运行环境

	小程序的环境分为渲染层和逻辑层：
		渲染层：WXML模板WXSS样式，他们工作在渲染层；
		逻辑层：js脚本工作在逻辑层。
	而渲染层和逻辑层分别由两个线程来管理：
		渲染层：WebView进行渲染；因为有多个页面，所以存在多个WebView线程
		逻辑层：jsCore线程运行js脚本。
	这两个线程的通信会通过微信客户端做中转，逻辑层发送网络请求也由Native转发。
	如下图：

在这里插入图片描述

页面生命的周期

App() 必须在 app.js 中注册，且不能注册多个。所以App（）方法在一个小程序中有且仅有一个。

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

onLoad: 监听页面加载
一个页面只会调用一次。就是只有首次访问这个页面的时候才会触发。
接收页面参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 监听页面显示
每次打开页面都会调用一次。

onReady: 监听页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

onHide: 页面隐藏
当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。

以上就是我对微信小程序的分析，如有错误或者或者不恰当的地方欢迎指点。

第一次写博客，也不知道写什么好，所以就写这么点东西咯。将就哈嘛！

'青山'

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
初步认识微信小程序开发

- 前言如果你是跟我十天前一样对微信小程序一无所知的你那么你就来看一下这篇文章。=>{ 为了凑字数，还是写点口水话。首先说一下微信小程序的好处在哪里，在这里我就不罗嗦了。微信小程序的好处说简单点就是（免安装，成本低）：免安装=>顾名思义就是不用像手机app那样要去应用商店下载，然后在安装，才能使用，微信小程序是不需要的。直接在微信里面打开，用完就走就可以了，这样的好处当然也能给予我们的手机内存得到释放。成本低=>这个成本低，主要体现在了哪里呢？当然就是推广成本了啊；现在满大街都
复制链接

扫一扫