小程序框架taro使用详细教程

1，安装node环境（node必须是8.0.0以上版本）
2.cli工具的安装 $ npm install -g @tarojs/cli
如果有sass相关的安装错误，那么执行以下的命令 ----npm install -g mirror-config-china
验证安装是否成功：taro -V
3.开始使用，，创建模版项目（我的项目是sass编译）
taro init myApp（初始化一个项目）
创建完项目之后，Taro 会默认开始安装项目所需要的依赖，，，输入命令：npm i
4.选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。
微信小程序编译预览及打包（去掉 --watch 将不会监听文件修改，并会对代码进行压缩打包）
npm run dev:weapp（运行项目，可以在package.json中，将启动的配置改为自己觉得方便的，）
如：“dev:weappt”: “npm run build:weapp – --watch”,改成"start": “npm run build:weapp – --watch”,
启动变成：npm run start 方法和变量用驼峰
npm run build:weapp
5.更新 CLI 工具自身和项目中 Taro 相关的依赖
输入命令：更新工具====》npm i -g @tarojs/cli@latest
更新依赖====>taro update project
环境及依赖检测：taro info
诊断项目问题：taro doctor （了解即可）
6.taro语法使用注意事项：
使用两个空格换行；
结束不能用分号；
除了缩进，不能使用多个空格；
统一用单引号；
关键词后加空格，如Iif (condition) {},括号前都有空格；
避免多余的空行；
函数声明时括号与函数名间加空格，，，，如function name (arg) { … } run(function () { … })
展开运算符与它的表达式间不要留空白 如：fn(…args)
遇到分号时空格要后留前不留 如：for (let i = 0; i < items.length; i++) {…}
代码块首尾留空格 如if (admin) {…}
圆括号间不留空格 如getName(name)
属性前面不要加空格 如user.name
一元运算符前加一个空格 如：typeof !admin
注释首位留空格 如：/* comment */
模板字符串中模板前后不加空格 如：const message = Hello, ${name}
逗号后加空格 如const list = [1, 2, 3, 4] function greet (name, options) { … }
不允许连续多行空格
单行代码块两边加空格
始终将逗号置于行末
点号操作符须与属性需在同一行
函数调用时，标识符与括号见不留空格 如console.log(‘hello’)
键值对冒号与值之间留空白 如const obj = { ‘key’: ‘value’ }
**变量和函数名统一使用驼峰命名法： 如function myFunction () { } const myVar = ‘hello’
字符串拼接操作符 (Infix operators) 之间要留空格 如const message = 'hello, ’ + name + ‘!’
检查 NaN 的正确姿势是使用 isNaN() 如 if (isNaN(price)) { }
合法的字符串和type of 进行比较 如typeof name === ‘undefined’
**

· 数组的注意事项：1.不要解构空值 2.使用数组字面量而不是构造器 如const { a: { b } } = foo
3.不要扩展原生对象 如Object.prototype.age = 21（不行）
4.对象属性换行时注意风格 const user = { name: ‘Jane Doe’, age: 30, username: ‘jdoe86’ } // ✓ 正确
const user = {
name: ‘Jane Doe’,
age: 30,
username: ‘jdoe86’
}
5.不使用不必要的对象值作为计算属性 如const user = { name: ‘John Doe’ } （对）
6.避免使用 arguments.callee 和 arguments.caller
7.嵌套的代码块中禁止再定义函数
8.禁止使用 Function 构造器
const sum = new Function(‘a’, ‘b’, ‘return a + b’) // ✗ 错误
9.自调用匿名函数 (IIFEs) 使用括号包裹
const getName = function () { }() // ✗ 错误
const getName = (function () { }()) // ✓ 正确
const getName = (function () { })() // ✓ 正确
10.使用 Promise 或者 async functions 来实现异步编程
function* helloWorldGenerator() { // ✗ 错误
yield ‘hello’;
yield ‘world’;
return ‘ending’;
}
类名注意事项：1. 类名要以大写字母开头
const dog = new Animal() // ✓ 正确
2.避免对类名重新赋值
class Dog extends Mammal {
constructor () {
super() // ✓ 正确
}
}
3.使用 this 前请确保 super() 已调用
class Dog extends Animal {
constructor () {
this.legs = 4 // ✗ 错误
super()
}
}
4.禁止多余的构造器
class Car {
constructor () { // ✗ 错误
super()
}
}
5.类中不要定义冗余的属性
class Dog {
bark () {}
bark () {} // ✗ 错误
}
6。无参的构造函数调用时要带上括号
function Animal () {}
const dog = new Animal // ✗ 错误
const dog = new Animal() // ✓ 正确
new 创建对象实例后需要赋值给变量
new Character() // ✗ 错误
const character = new Character() // ✓ 正确
用 throw 抛错时，抛出 Error 对象而不是字符串
throw ‘error’ // ✗ 错误
throw new Error(‘error’) // ✓ 正确
catch 中不要对错误重新赋值
try {
// …
} catch (e) {
e = ‘new value’ // ✗ 错误
}

				try {
				  // ...
				} catch (e) {
				  const newVal = 'new value'  // ✓ 正确
				}

组件传值

组件命名

	所有组件都应当首字母大写并且使用大驼峰式命名法（Camel-Case）

向事件处理程序传递参数

	通常我们会为事件处理程序传递额外的参数。例如，传入欲删除行的 id：
	Delete Row
	
	当你通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面。
	
class Popper extends Component {
  constructor () {
    super(...arguments)
    this.state = { name:'Hello world!' }
  }

  // 你可以通过 bind 传入多个参数
  preventPop (name, test, e) {    //事件对象 e 要放在最后
    e.stopPropagation()
  }

  render () {
    return 
  }
}