uniapp 项目启动在微信开发工具白屏 uniapp微信小程序开发

建议开发之前先看uni-app的文档：https://uniapp.dcloud.io/frame。以及熟悉vue的语法：https://cn.vuejs.org

 *本文默认已经安装微信开发者工具和HbuilderX，以及在微信公众平台申请好AppID

1、开发工具

①首先打开微信开发者工具→设置→安全→开启服务端口

②打开Hbuilder X，工具→设置，找到微信开发者工具安装目录，设为启动地址。

*填写外部web服务器调用url（本地ip+上方微信小程序中的端口号：例如ip:192.168.3.156，端口号为:66888,则url:http://192.168.3.156:66888)。

*ip获取：打开cmd，运行 ipconfig 命令即可获取。

 2、在Hbuilder X  中，新建项目。

3、在项目目录中找到manifest.json，点击微信小程序配置，填写AppID即可。

 4、此时在Hbuilder X  中，选择运行→运行到小程序模拟器→选择微信开发者工具，即可调起微信开发者工具查看运行起来的项目。

= = =  分割线 = = =    以下为微信小程序云开发

5、在打开的微信开发者工具中，点击云开发按钮→点击创建新环境→填写环境名称→环境ID，确定即可。

  

 创建完成以后，我们再创建一个表。点击数据库→添加集合→填写，确定即可。这样就可以进行微信云开发。

 6、微信云开发步骤

① 初始化

我们在使用数据库之前，需要进行初始化操作。建议在App.vue的onLaunch中进行初始化，此处env填写 你的环境id，可在云开发控制台中进行查看。

② 举例使用 

// wx.cloud.database 处要填写你的云开发环境ID

<template>
	<view class="content">
		<button @click="testAdd">测试添加一下</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '测试'
		};
	},
  created() {
  	wx. cloud. init()
  },
	methods: {
        testAdd() {
          let db = wx.cloud.database({evn:'你的环境id'})
          let userBaseCollection = db.collection('user_base')
          userBaseCollection.add({
          data:{
            name:'测试一下',
		    userId:6
          },
           success: (res) => {
            console.log(res);
         }
       })
     }
   }
};
</script>

  

此时我们查看数据库，发现已经成功添加了name 以及userid

 

遇到以下报错： 请先调用 init 完成初始化后再调用其他云 API。init 方法可传入一个对象用于设置默认配置，详见文档。; at cloud.callFunction api    

本文中解决方案：created 时调用wx.cloud.init()即可 

 

其他解决方法是：在云函数cloudfunctions文件夹下对应云函数内添加如下代码段 ：

cloud.init({
  env: "cloud-tirp-89b834"//默认环境配置，传入字符串形式的环境 ID 可以指定所有服务的默认环境，传入对象可以分别指定各个服务的默认环境
})

 7、项目其他配置项请参考uni-app 文档，文档中已详细介绍：https://uniapp.dcloud.io/collocation/pages