taro-vue小程序开发记录一【安装开发环境，搭建taro项目】

一、安装开发环境，node.js -v:v10.12.0；yarn v1.22.10或npm,cnpm，优先方式yarn>cnpm>npm；Taro v3.0.26；

　　开发工具：VSCode；微信开发者工具

二、创建taro项目

　　使用命令创建模板项目$ taro init myApp

　　选择vue+taro-ui-vue模板

　　下载成功后在myApp目录下安装依赖，使用命令：$cnpm install

　　项目搭建成功目录：

　　　　

 

 

　　page目录下是菜单页面，默认会有index文件夹及里面有index.vue页面信息;index.scss样式信息;index.config.ts配置信息;

　　运行项目命令：$yarn dev:weapp;其它环境命令参考taro官网，运行后在微信开发者工具导入项目后可以查到到效果

　　三、正式开始编写项目，首先编写登入页面

　　

<template>
  <view>
        <view class='login_bg'>
        
        <image style="width: 160px;height: 90px;  " src='../../../image/logo.png' />
        
        <open-data style="width:160px;height:160px;" type="userAvatarUrl"></open-data>

        </view>

          
        <AtForm>
          <AtInput 
            name='account' 
            title='账号' 
            type='text' 
            placeholder='请输入账号' 
            :value="user_account"
            :onChange="handleChange" 
          />
          <AtInput 
            name='pwd' 
            title='密码' 
            type='password' 
            placeholder='请输入密码' 
            :value="user_pwd"
            :onChange="handleChange" 
          />
          <view style='height:30px'>
          </view>
          <AtButton type='primary' style='background-color:#FFB718;border-color:#FFB718' :onClick="login">登入</AtButton>      
        </AtForm>
        </view>
  </view>
</template>
<script>
import Taro, { Component } from '@tarojs/taro'
import { AtForm, AtInput, AtButton,AtAvatar } from 'taro-ui-vue'
import './index.scss' 
import logo from '/image/logo.png'

export default {
  name: 'AtFormDemo',
  components: {
    AtForm, 
    AtInput, 
    AtButton,
    AtAvatar
  },
   data () {
    return {
      user_account:'',
      user_pwd:''      
      }
    }},
  methods: {     
    handleChange (value = 'value') {
      this.value = value
    },
    onSubmit (event) {
      console.log('登入')
    }
  },  
}
</script>

　　效果图：

 

 

 

 总结：遇到的问题

1、获取微信头像，由于微信废弃了wx.getUserInfo获取用户信息的接口，目前只能通过button授权或使用 open-data 展示用户基本信息。详情

2、加载本地资源图片时，显示渲染层网络层错误。

　　

 

　　原因：因为图片路径问题，最开始以为根路径是src文件，使用/image/logo.png路径一直报错，这个路径是我根据微信开发者工具提示选择的，一直以为不会有错，网上一些类似问题的解决方案，修改配置，修改微信基础库版本都没有解决。最后经过分析，使用http地址可以正常显示图片，猜想可能还是路径不对导致的，然后使用../一层一层往上找最后解决了。