微信小程序开发入门（一），Nodejs搭建本地服务器

最新推荐文章于 2024-08-20 13:26:53 发布

weixin_30279671

最新推荐文章于 2024-08-20 13:26:53 发布

阅读量2.5k

点赞数 3

文章标签：数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/cheryshi/p/10372452.html

版权

本文介绍了微信小程序开发的初步步骤，包括使用Node.js搭建本地服务器，创建数据文件data.json，下载并使用微信开发者工具，以及小程序的基本框架和组件如Swiper、列表和TabBar的实现。强调了数据绑定和事件处理，同时提醒在开发过程中注意本地资源的使用。

摘要由CSDN通过智能技术生成

1. 如何模拟真实环境中，读取服务端数据，首先需要使用Nodejs搭建一个本地服务器的环境。

在搭建web服务器之前，需要先安装node.js(安装版本最好为6.9.x)

安装后node.js，接下来就需要安装http的镜像文件

npm install http-server -g(windows下)
sudo npm install http-server -g(linux和mac下)
接下来在桌面创建一个文件夹

cd 文件夹名字
http-server
这时候，就会显示在8080端口下运行的一个本地服务器

在wechat文件夹下创建data.json文件作为服务端数据

2.下载微信开发者工具

第一步：安装
首先下载微信开发者工具，直接下载安装，点击下一步

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201716

2.1 创建项目应用：安装完成后，打开并扫码登录。小程序发布需要企业级的认证公众号，所以个人订阅号是不能发布的。所以我这里选择无AppID，创建项目选择一个本地空文件夹，勾选创建quick start 项目生成一个demo。

3、编写小程序：demo初始化并包含了一些简单的代码文件，其中app.js、app.json、app.wxss 这三个是必不可少的，小程序会读取这些文件初始化实例。

　　app.js是小程序的初始化脚本，可以在这个文件中监听小程序的生命周期，申请全局变量和调用API等

　　app.json是对小程序的全局配置，pages设置页面路径组成（默认第一条为首页），window设置默认页面的窗口表现等

　　app.wxss 是整个小程序的公共样式表。类似网站开发中的common.css

二、小程序的框架

1、小程序的配置

　　app.json主要分为五个部分：pages：页面组，window：框架样式（状态栏、导航条、标题、窗口背景色），tabBar：底部菜单，networkTimeout：网络超时设置，debug：开启debug模式

　　page.json针对页面单独设置，层叠掉app.json的全局设置

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white"
  }
}

注意：如果想新建一个页面组，在“pages”添加一个路径，例如："pages/join/join"，系统可自动创建一组join页面组

2、小程序的逻辑

　　使用App()来注册一个小程序，必须在app.js中注册，且不能注册多个

App({//如下为小程序的生命周期
  onLaunch: function() { },//监听初始化
  onShow: function() {  },//监听显示（进入前台）
  onHide: function() {  },//监听隐藏（进入后台：按home离开微信）
  onError: function(msg) {  },//监听错误
  //如下为自定义的全局方法和全局变量  
  globalFun:function(){},
  globalData: 'I am global data'
})