使用Vue开发微信小程序1

1. 安装vue脚手架

npm install -g vue-cli

2. 创建项目

vue init mpvue/mpvue-quickstart truth_hold

输入appid 一路回车

3. 安装依赖

npm install
npm run dev

最后将项目导入到微信开发者工具中。

4. 当出现的时候需要安装依赖

出现

npm install sass-loader node-sass --save-dev

然后报错，在package.json中修改node-sass的版本为7.3.1

然后重新安装node-sass，之后还是报错

Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

找到教程之后就好了

//卸载 node-sass
npm uninstall node-sass
//然后安装最新版本（5.0之前）
npm install node-sass@4.14.1

5. 箭头函数

function(a,b){return a+b;
}
(a,b)=>{return a+b;
}

6. 同步异步函数

 methods:{addMark(add){this.mark += add;console.log("this.mark",this.mark);},promiseTest(num){var result = new Promise(function(resolve,reject){if(num>2){resolve("我执行成功了，状态变成resolved");console.log(`num的值为${num}`);}else{reject("我执行失败了，状态变成了rejected");console.log(`num的值为${num}`);}})return result;},setTime(num){return new Promise(function(resolve,reject){setTimeout(function(){resolve(`第${num}个延时器`);},2000);});},async test(){// console.log("测试方法运行成功");// console.log(host);// let res = this.promiseTest(3);// console.log(res);let result = await this.setTime(1);console.log(result);}},mounted(){this.test();}

ES6参考文档:https://www.runoob.com/w3cnote/es6-concise-tutorial.html

7. 创建新页面

在pages下新建文件夹然后新建me.vue 再新建main.js 将index中main.js中的代码复制给me文件夹下的main.js，然后将me.vue中加上

在app.json中新添加"/pages/me/main", 然后保存重新启动项目

8.后端环境搭建

下载服务端源码https://console.cloud.tencent.com/lav2/dev 解压将server文件夹复制到项目目录下

然后进行配置：

 serverHost: 'localhost',tunnelServerUrl: '',tunnelSignatureKey: '',qcloudAppId:'',qCloudSecretId:'',qCloudSecretKey:'',wxMessageToken: 'weixinmsgtoken',networkTimeout: 30000,

运行出错。我滴乖乖，大小写不认识了，以下为正确的

 serverHost: 'localhost',tunnelServerUrl: '',tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',qcloudAppId:'1305448955',qcloudSecretId:'AKIDcJn26C9yZv1sc6wuTFk23pmYVMqLqdPa',qcloudSecretKey:'KRqOjqhJfOuAPQESRdCUY9ZsNmnlZ9Vc',wxMessageToken: 'weixinmsgtoken',networkTimeout: 30000,

生成数据库后进行数据库的配置，修改账号密码和数据库的名称

完成之后控制台进入server文件夹进行

npm install

然后再运行

sudo npm install -g nodemon

等待安装完成

然后初始化数据库，

node tools/initdb.js

可能遇到的错误

9. 获取用户的登录信息

首先安装sdk插件，这个插件可以帮助我们获得用户的openid等敏感信息，openid是微信中用户的唯一标识，利用腾讯云提供的插件可以是开发易如反掌。

npm install --save wafer2-client-sdk

然后可以点击详情-> 本地不校验合法域名那一项取消选择即可

如果报错XX is not a function,则使用箭头函数对成功和失败的函数进行修改。

 login(){qcloud.setLoginUrl(config.loginUrl);qcloud.login({success: userInfo => {console.log('登录成功', userInfo);this.loginSuccess(userInfo);},fail: err => {console.log('登录失败', err);}});},loginSuccess(userInfo){wx.setStorageSync('userinfo',userInfo);}

10.添加组件

//子组件
export default {name: 'LoginWindow.vue',methods:{login(){qcloud.setLoginUrl(config.loginUrl);qcloud.login({success: userInfo => {console.log('登录成功', userInfo);this.loginSuccess(userInfo);this.$emit("changeShow",false,userInfo)wx.showTabBar()},fail: err => {console.log('登录失败', err);}});},loginSuccess(userInfo){wx.setStorageSync('userinfo',userInfo);}}
}
</script>

//父组件<div v-if="showLogin"><LoginWindow @changeShow="getModel(arguments)"></LoginWindow>
</div>
<script>import LoginWindow from '../../components/LoginWindow'export default {data(){return{mark: 0,userinfo: {},showLogin: false}},components:{LoginWindow},methods: {addMark(add) {this.mark += add;console.log("this.mark", this.mark);},getModel(val){this.showLogin = val[0];this.userinfo = val[1];}},mounted(){//将用户信息存入缓存然后看缓存中是否有openid 有的话就认为用户登录将用户信息进行赋值，否则就弹出授权登录页面const userinfo = wx.getStorageSync('userinfo');if(userinfo.openId){this.userinfo = userinfo;console.log("用户信息:",this.userinfo);}else{wx.hideTabBar();this.showLogin = true;}},}
</script>

里面设置父组件和子组件的多参数传递问题，值得一看。