微信小程序开发的入坑心得.js开发经验

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发的入坑心得.js开发经验

从框架开始

早期版本的原生小程序基础库存在组件开发困难、无法使用npm模块等问题。 腾讯团队开源wepy来解决老版本原生小程序开发的缺陷。 后来支付宝、今日头条等APP陆续推出了自己的小程序，于是mpvue跨小程序端框架出现了； 后来出现了多终端开发框架uni-app、taro等。 使用该框架开发小程序的开发可以根据自己的需求和习惯来选择框架：

如果您想知道选择哪个框架，我推荐 uni-app，原因如下：

主要需要注意的是，无论使用哪种框架（尤其是多端开发框架），陷阱的数量都不会少； 另外，小程序基础库也在不断完善，目前还支持组件开发和npm模块。 我喜欢这种清爽简洁的方式。 开发不妨使用原生小程序进行开发。

从原生小程序开始

所谓原生小程序开发，就是不使用上述框架对小程序的基础库和语法进行二次封装和构建的一种开发小程序程序的方式。

为了清晰地写出小程序的语法和能力及其生态规范，说实话，官方文档做得很好，但同时，学习成本也不低。 在阅读本文档时，建议开发快速通读一两遍，服务器端相关信息除外。 模块（服务器、云开发），阅读下面作者给出的供vue开发快速熟悉小程序开发“捷径”。 然后，你就可以一边写一边改，慢慢熟悉它们。

项目设置

新建项目需要脱离vue-cli等脚手架工具，下载微信小程序官方IDE，然后新建一个小程序项目。 AppID是在微信公众平台创建小程序应用时获取的。 如果没有客栈，点击使用测试账号。 足够开发阶段使用（只有官方appid才能正式发布小程序）。

创建成功后，会有一个可运行的demo。 下面介绍一个*简单的小程序所需的目录和文件：

页 - 存储页面的目录。 每个页面都有自己的文件夹，并且必须包含同名的 js、wxss、json 和 wxml 文件。 详细内容将在下一节介绍。

utils - 非必需目录，存放工具方法、公共方法等。

app.js - 入口文件，类似于vue.js应用中实例化Vue对象的js（通常命名为app.js或main.js）

app.wxss - 公共样式表（wxss可以被视为CSS语法的子集）。 这里写的样式是全局的，你不需要在任何文件中引入它们。

..json - IDE配置目录，无需手动配置

.json - 微信搜索索引配置，配置当前小程序内是否可以搜索到你的某些页面。 有兴趣了解更多的同学可以参考文档。

当然微信小程序开发的入坑心得.js开发经验，实际项目中的目录会稍微复杂一些。 以我的一个小程序项目为例：

有些大家已经熟悉或者已经介绍过的文档就不介绍了：

- 存放小程序目录 - 存放图片、字体等静态文件的目录制作开发微信小程序，通常命名为.js - 常量配置文件，当然你可以放在你喜欢的其他目录 - npm 依赖于微信开发工具的目录二次构建生成的不需要手动创建。 后面会有npm依赖安装的介绍。

UI 框架有一个基本的目录结构。 您可能需要一个 UI 框架来处理反馈等交互（模态、吐司、动画），而不是再次沉浸在写作中。 这里推荐几个小程序UI框架，具体安装（推荐npm安装）移至各自文档：

构造

发布和调试编辑器时，必须使用微信开发工具。 但在编码时，你仍然可以使用自己喜欢的编辑器，安装小程序相关的辅助插件，辅助小程序开发。 微信会实时监控项目文件的修改并编译到模拟器中。

小程序中使用npm依赖 npm依赖的安装和引入与node环境下没有什么区别，但是安装依赖或更新依赖后需要在微信开发工具中进行npm build：

此时你会发现多了一个目录。 这时候我们就可以像node环境一样直接引入npm依赖了。

当然，一些依赖于小程序不支持的对象（比如操作DOM）是无法运行的，所以需要注意区分。

ES6 你可以使用ES6。 考虑兼容性时，不需要使用babel转换为ES5。 查看右上角的详细信息：

环境变量

在node环境中，可以在打包时注入全局变量来区分环境，以便处理生产环境和开发环境的不同逻辑：

#生产环境变量设置，如：
set NODE_ENV=production 
#开发环境变量设置，如：
set NODE_ENV=development

但在小程序中，官方并没有这方面的支持！ 因此，在开发或发布时需要手动更改用于区分环境的变量：

//示例，config.js
const ENV = 'product'; //环境变量，手动修改
module.exports = {
  ENV,
  DOMAIN: ENV === 'product'? 'a.com': 'dev.a.com',
  TOKEN_KEY: ENV === 'product'? 'token' : 'token_dev',
  //more...
}

写页

页面的构建需要使用Page方法。 详细的属性和生命周期你可以在文档中查看。

为了页面生效，还必须匹配根目录下app.json中的pages字段中所有页面的路径，且pages数组中的**个页面就是小程序进入的**个页面：

{
 "pages": [
   "pages/index/index", //进入小程序时加载的**个页面
   "pages/logs/logs"
 ],
 //more...
}

创建新页面

页面组合文件

假设新页面名为page1，则会生成四个文件：

page1.js - 调用Page方法，处理页面逻辑

page1.json - 当前页面的配置文件，例如设置页面背景颜色、导航栏标题等。

page1.wxml - 页面视图，类似于HTML语法，但使用的标签必须是小程序自带的组件或者自定义的组件名称（下一节介绍）； 另外，view标签的地位相当于HTML中的div； 并且，命令事件绑定的语法与vue不同（例如：v-if对应wx:if）。 详细介绍请查看这里。 如果你不明白模板部分，你可以先把它放下，因为你很可能可以使用组件来代替它。

page1.wxss - 你几乎可以认为它是一个css文件，但是它会在当前页面生效，无需手动引入。与css的具​​体区别可以在这里找到

注意：小程序直接修改Page中的数据，不会更新视图。 需要通过Page..（文档搜索页..视图）方法设置值来更新视图。

成分

较新的小程序版本已经支持自定义组件，但我认为开发体验不如vue的单文件组件。 以下是一些简单的比较。

组件化

与页面的构成类似，组件的四个文件与页面的功能相同。 主要区别有两点：

{
  "component": true
}

组件调用

在页面或其他组件目录下的json文件中，传入所有引用组件的标签名称（key，自己命名）和文件路径（value）。

{
	"usingComponents": {
		"component-tag-name1": "/components/component-tag-name1/component-tag-name1",
		"component-tag-name1": "/components/component-tag-name1/component-tag-name1"
        //more component...
	}
    //more config...
}

并在wxml文件中写入组件标签及其传递的参数、事件等：

<component-tag-name1>component-tag-name1>
<component-tag-name2 option="{{yourOptionData}}" bindSomeEvent="eventCallback" />

下面介绍构造函数中传入的几个重要属性。

相当于Vue中的props属性，它约定父组件或页面传入的参数格式：

Component({
  properties: {
    data1: {
      type: Number, //参数的类型
      value: 0 //默认值
    },
    data2: {
      type: Number,
      optionalTypes: [String, Object], // 可以指定多个属性的类型, 如果type也定义了的话或被计入optionalTypes, 这里的参数可以是 Number 、 String 、 Boolean 三种类型中的一种
      observer: function(newVal, oldVal) {  //参数值变化时的回调函数, 与vue中`watch`的作用类似
      }
    }
  }
})

相当于vue中的，首先你必须构建一个：

module.exports = Behavior({
  behaviors: [], //behavior里可以引用其他behavior
  properties: { //要共享的参数
    myBehaviorProperty: {
      type: String
    }
  },
  data: { //要共享的data
    myBehaviorData: {}
  },
  attached: function(){}, //要共享的生命周期处理逻辑
  methods: { //要共享的方法
    myBehaviorMethod: function(){}
  }
})

然后在组件中引入：

// my-component.js
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  properties: {
    myProperty: {
      type: String
    }
  },
  //more...
})

功能类似于Vue中的watch属性。 它可以监听一个或多个数据变化并执行回调，但语法不同。 详情请参阅文档。 这里我就不详细说了。

生命周期

在小程序中，组件的生命周期与页面的生命周期并不相同（这是因为，在vue中，无论页面还是组件是vue实例，都可以视为小程序，而在小程序是不同的实例），App注册小程序也有自己的生命周期。

小程序组件的生命周期与Vue中的生命周期时间节点基本相同，只是命名不同； 而生命周期方法可以作为与数据同级的属性，也可以放在属性中，但后者的优先级更高。 高的：

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

另外，组件还有一套可以使用的生命周期，即组件所在页面的生命周期（但并不是页面的所有生命周期方法都不需要），只有show、hide ,; 组件所在页面的生命周期回调写在属性中：

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

组件通信和事件

和Vue的通信方式一样，事件是主要且提倡的组件与页面或组件与组件之间的通信方式，并且在小程序中，也提倡单向数据流规范。 在页面或组件的wxml中绑定事件：

<component-tag-name bindmyevent="onMyEvent" />

<component-tag-name bind:myevent="onMyEvent" />

组件中触发事件：

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，会作为参数传递到接收事件的方法里
      var myEventOption = {} // 触发事件的选项, 主要控制事件是否可冒泡或者可有捕获截断,详情可参考文档
      this.triggerEvent('myevent', myEventDetail, myEventOption) //触发事件`myevent`
    }
  }
})

路由

组件介绍完毕。 小程序的路由机制不依赖其他插件，由小程序自身控制。 并且开放的能力仅限于页面跳转，可以携带参数。 路由变更回调等能力未开放，跳转携带参数。 可以在目标页面的生命周期方法的参数中接收：

//more...
//假设当前页面路由为'/pages/demo/demo?a=1&b=2'
onLoad: function (options) {       //options用于接收上个页面传递过来的参数
    console.log(options.a, options.b); // =>1, 2
})
//more...

路由跳转的几种方法可以直接阅读文档。 我在这里就不详细介绍它们了。 只需注意，您了解了页面堆栈的概念（类似于浏览器环境中的对象），并且需要使用 wx. 方法跳转到页面。

全局变量/全局方法

在Vue的开发过程中，定义全局方法/属性时，我们通常会挂在Vue对象的原型上：

Vue.prototype.data1 = 'xxx';
Vue.prototype.method1 = ()=>{
};
//在Vue实例里可以方便的访问到:
//more...
mounted(){
  console.log(this.data1);
  this.method1()
}
//more...

当然，我们会把一些经常改变和访问的状态交给Vuex。 小程序中，可以在App方法中定义全局变量/方法：

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  globalData: { //全局变量放在globalData
      data1: '1',
      data2: '2'
  },
  //全局方法直接定义在根级别
  method1(){
  }
})

转移：

const app = getApp();
Page({
	data: {
	},
	onLoad() {
		app.method1();
		console.log(app.data1, app.data2);  //=>1, 2
    }
    //more...
})

或者，您可以将它们直接挂在物体上，但通常不建议这样做。

global.data1 = '';

调试

微信开发工具是使用开源内核开发。 在微信开发工具中调试小程序几乎和调试网页一样； 不幸的是，您无法下载“vue.js”等扩展来协助调试。 ，所以很多时候只能通过断点和打印日志来调试。 虽然该工具提供了应用程序级别的组件结构和数据视图，但在我看来效果不大（大家可以体验一下）：

测试

与Vue的Vue Test Utils类似，小程序提供了 - 用于调试组件，并且可以与jest等测试框架配合使用来实现组件测试。

更多细节开发可以慢慢探索，感谢阅读！

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等