App.js

一、什么是小程序？ 基于微信的可以为用户提供一些服务的web项目，利用微信提供的接口可以让所有开发者使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。 二、小程序开发工具以及语言？ 小程序需要用到微信提供的 小程序开发工具 ，​小程序的主要开发语言是 JavaScript 。 三、小程序与普通网页开发的区别？ ​网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中， 并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。 这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。 四、小程序的代码构成？ （1）在我们新建的小程序项目里面会有四种类型的文件。 .json 后缀的 JSON 配置文件 （静态配置信息）　　　　　　 .wxml 后缀的 WXML 模板文件（相当于原生html文件） .wxss 后缀的 WXSS 样式文件（相当于原生css文件）

1、HTML 1 <! doctype html > 2 < html lang ="en" > 3 < head > 4 < meta charset ="utf-8" > 5 < meta name ="viewport" content ="width=device-width, initial-scale=1" > 6 < title > Template • TodoMVC </ title > 7 < link rel ="stylesheet" href ="node_modules/todomvc-app-css/index.css" > 8 <!-- CSS overrides - remove if you don't need it --> 9 < link rel ="stylesheet" href ="css/app.css" > 10 </ head > 11 < body ng-app ="MyTodoMvc" > 12 < section class ="todoapp" ng-controller ="MainController" > 13 < header class ="header" > 14 < h1 > todos </ h1 > 15 < form ng-submit ="add()" > 16 < input class =

一、初始化项目 1、下载模板 进入github中 https://github.com/tastejs/todomvc-app-template ，并且在命令行将其clone下来 git clone https://github.com/tastejs/todomvc-app-template.git 2、安装依赖 进入项目目录中安装依赖 npm install 3、引入vue.js文件 首先在命令行中安装vue npm install vue 然后再index.html中引入 然后再app.js文件中写入相应的逻辑代码 二、实现功能 1、数据列表渲染功能 1.1 功能分析 有数据 每一个数据对象： { id: 1 , content: '' , complated: '' # 表示是否已经完成的任务true（false） } 并且每一个数据对象有三个状态： 　　　　　　　　　　　　未完成（没有样式） 　　　　　　　　　　　　已完成（.completed ） 　　　　　　　　　　　　编辑中( .editing ) 无数据 输入框下面的部分应该隐藏起来 1.2 实现 创建一个数据源 items:[ {id: 1,content:'dddd',completed: false }, {id: 2,content:'aaaa',completed: false }, {id: 3

注：本篇不是入门教程，入门请直接查看官方文档。本篇的主要目标是通过实际问题来介绍 webpack 中容易被人忽略的细节, 以及源码分析( 以最新发布的 release 版本1.14.0的源码为例 ), 并且提供几种解决方案。 随着前端技术的火热发展，工程化，模块化和组件化的思想已逐步成为主流，与之相应的，就需要有一整套工具流可以支撑起它。 现在比较热门的前端资源模块化管理和打包工具应该非 Webpack 莫属了。 Webpack 是什么 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 —引自 Webpack 中文指南 使用举例 我们来看一下官方文档中的最小用例，新建并写入以下内容到这两个文件： cats.js var cats = [ 'dave' , 'henry' , 'martha' ]; module .exports = cats; app.js (Entry Point) cats = require ( './cats.js' ); console .log(cats); 这个时候，就可以使用

阅读目录 一：理解koa-router一般的路由 二：理解koa-router命名路由 三：理解koa-router多个中间件使用 四：理解koa-router嵌套路由 五：分割路由文件 回到顶部 一：理解koa-router一般的路由 koa-router是koa的路由库，什么是路由库呢？比如当我们访问 http://localhost:3001/ 的时候，浏览器就会显示index页面的内容(一般默认是index)。如果当用户访问 http://localhost:3001/home 的时候，浏览器就会显示home页面的内容。 假如要实现上述功能，如果我们不使用 koa-router 或者其他路由中间件的话，我们一般需要在app.js如下代码编写： const Koa = require('koa' ); const app = new Koa(); const route = (ctx, next) => { console.log(ctx.path); switch (ctx.path) { case '/' : ctx.body = '<h1>欢迎光临index page 页面</h1>' ; break ; case '/home' : ctx.body = '<h1>欢迎光临home页面</h1>' ; break ; default : // 404页面 return

对于野生程序员的我来讲，每次弄出一个东西，都会记录分享一下，需求不一致，所以使用的音频播放方式不一样，记录一下用js进行播放音频的方法： 首先需要全局设置ios静音模式下播放声音，当然此方法也可以设置其他参数，[微信开发文档地址] (https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.setInnerAudioOption.html) 注意：千万不要用innerAudioContext.obeyMuteSwitch = false;，2.3.0 版本开始此参数不生效 注意：千万不要用innerAudioContext.obeyMuteSwitch = false;，2.3.0 版本开始此参数不生效 注意：千万不要用innerAudioContext.obeyMuteSwitch = false;，2.3.0 版本开始此参数不生效 在app.js中 onLaunch ( ) { wx . setInnerAudioOption ( { obeyMuteSwitch : false , } ) } 在page.js中，为防止创建多个音频播放，我这里采用全局创建的方式，通过停止、更换播放地址、播放等进行重新播放 api地址 const innerAudioContext = wx .

之前wx.getUserInfo写在app.js中，为了尽量减少影响，加了一个登录授权页面tologin wx.login({ success: function (r) { var code = r.code; // 登录凭证 if (code) { // 2、调用获取用户信息接口 wx.getUserInfo({ success: function (res) { // console.log("小程序res") // console.log(res) var userInfo = res.userInfo; // console.log("用户信息") // console.log(userInfo) var timeStamp = Date.parse( new Date()) / 1000 ; var nickName = userInfo.nickName; var gender = userInfo.gender; var avatarUrl = userInfo.avatarUrl; var country = userInfo.country; var province = userInfo.province; var city = userInfo.city; var param = { code: code, nickname: nickName, logo:

react项目构建可以很简单，但是如果是结合typescript，其实也不是很麻烦，官网也有很明确的说明。有两种办法： 1、直接构建带有typescript的react项目，我们需要增加额外的参数，模版不能使用默认的cra-template。而是使用cra-template-typescript。 npx create-react-app tsreactdemo --template typescript 创建完成的成功提示与原来没有太大的区别，直接进入项目路径下，然后yarn start或者npm start。 进入项目，我们不着急启动，首先看看文件长得怎么样，默认会创建一个tsconfig.json，而且src目录下的默认的index.js,App.js文件变为了ts版本的index.tsx,App.tsx。 我们可以看看package.json中的依赖： 其实，依赖就是多了@types/jest,@types/node,@types/react,@types/react-dom 。 最早，我们创建typescript的react项目命令好像直接就是npx create-react-app xxx --typescript，可是现在这样不行了，后面的参数必须是--template typescript，而不是直接--typescript。这个需要说明一下，并不是我们搞错了

先在同级处新建js文件（app.js） 使用时npm 安装 Node.js 模块语法 也就是对应的文件所在地“npm install”一下 然后安装对应需要的模块： express path request const express = require('express' ); const path = require('path' ); const request = require('request' ); // 配置静态文件服务中间件 // server地址 const app = express(); // 请求的IP let serverUrl ='http://192.168.1.133:8080' ; app.use(express.static(path.join(__dirname, './' ))); app.use( '/', function (req, res) { let url = serverUrl + req.url; req.pipe(request(url)).pipe(res); }); // 传入的自己的IP，3000什么的是自定义的，8080还是8000啥的之类的.. app.listen( 3000,'192.168.1.18' , function () { console.log( 'server is running at

创建一个服务器 首先建立一个js文件，命名为app.js 写入内容： const http=require('http' ); http.createServer((request,response) => { response.setHeader( 'Access-Control-Allow-Origin','*') // 设置请求头 第一项代表允许的请求格式，第二项代表允许谁请求 response.write('hello node' ); response.end(); // 必须写，否则页面会进入死循环 }).listen(8000); 然后打入node命令：node app.js （.js可以省略） 打开浏览器访问 172.0.0.1:8000 或者 localhost:8000 都可查看运行结果 就是这么简单，但是在node.js中，只要你修改了js文件，就需要去重新启动node，直接刷新浏览器是没有用的。这种设计有利于提高性能，但是不利于开发调试 所以supervisor就可以帮我们解决这个问题了，supervisor可以监视我们的代码，并且自动重启 使用方法：npm install -g supervisor 使用npm安装 然后就可以使用supervisor去命令app.js启动 supervisor app.js 这样每次保存都会自动帮我们重启