uniapp基础经验总结

一．小程序移植到uni-app细节问题：
**1.**调用本地图片：[外链图片转存失败(img-UuMp93hu-1562144546094)(https://mp.csdn.net/image/gou.png)]
**2.**点击事件的触发：@tap
3.使用for调用列表：
**二．**uni-app需要下载模拟器连接才能实时观测代码的正确性，下载夜神模拟器，端口号62001（第一个模拟器。通用的端口号），设置路径D:/Program Files/Nox/bin/Nox.exe。
三．小程序移植到uni-app问题，使用转换器的步骤：
**1.**先安装Node.js，然后在cmd窗口下输入npm install miniprogram-to-uniapp@1.0.6 –g安装转化器
2. 继续在命令行里，运行【 wtu -V 】，执行结果如下：
显示1.01，说明已经安装成功了。（wtu -> 取自wx to uni之意，后面都用这个全局命令）
3. 在命令行里，输入【wtu -i “你的小程序项目路径” -o “输出目录，可不填”】，如：【wtu -i “E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni”】 ，回车后即可以在源项目同及目录得到一个后缀为_uni的目录，即转换成功。
1. wx: 替换为 v-
bind 替换为 @
wx. 替换为 uni.
this.data 替换为 this 或者数据对象
2. 使用本地图片时使用：[外链图片转存失败(img-GLdZR4je-1562144571041)(https://mp.csdn.net/image/gou.png)]
使用js传过来的图片：
3. 将接口里面的列表传到本地列表使用： var that = this
that.本地列表 = 接口列表
4. 使用for来调用列表：
**5.**uniapp在将wxml导入进去时，需要使用一个总的之类的根标签框起来
3. 属性前面加上：就可以与data里面的属性进行关联，例如<input type=”text” :value = “title” @input=”change” /> //data里面的title就会显示在 input里面
4. 所有事件前面都需要加一个@
**5. 小程序下面的导航按钮，**例如：首页、分类、我的。在pages.json里面添加
“tabBar” : {
“color” : “#7A7E83”,
“selectedColor” : “#007AFF”,
“borderStyle” : “black”,
“backgroundColor” : “#ffffff”,
“list” : [
{
“pagePath” : “pages/tabBar/pfxf/pfxf”,
“iconPath” : “static/menu_1.png”, //初始化
“selectedIconPath” : “static/menu_1_s.png”, //点击之后
“text” : “首页”
},
{
“pagePath” : “pages/tabBar/services/services”,
“iconPath” : “static/menu_2.png”,
“selectedIconPath” : “static/menu_2_s.png”,
“text” : “我的”
}
]
}
6. 三元运算符：表达式？结果1：结果2
7. 绑定事件：跳转下一个页面</ navigator >
还有一种写法：v-bind: 直接替换成 :
总结：在标签里面需要使用到绑定函数，在标签外面可以直接使用{{ }}来调用data里面的数 据。
8. 使用for循环时，<view v-for=”list in datalist” />表示每一次都将循环一 遍，输出 不在一行。
<block v-for=”list in datalist” />表示将列表中的数组全部都输出一遍，输出在一行里面。
9. 前端中对齐方式，display：flex
flex-direction:wrow //换行 row//一行 column-reverse
justify-content:center//居中对齐 flex-start//左对齐 space-between // 两端对齐，空白均匀地 填充到flex成员之间
flex-end//右对齐flex-around//两端有间隙
10.uni-app调用接口固定格式：
var that = this;
that.searchStr = options.str;
console.log(that.searchStr);
uni.request({
url: ‘http://www.ywyev1.cn:85/GoodsInterface.asmx/GetGoodsLikeLByName’,
//调用接口—根据商品名称模糊查询商品信息
data: {
Name: options.str //传值
},
method: “POST”,
header: {
‘content-type’: ‘application/json’
},
success: function (res) {
console.log(res);
var returnResult = JSON.parse(res.data.d);
if (returnResult.result == “get success”) {
that.GoodsList = returnResult.GoodsList, //GoodsList，noDataStyle，getSuccessStyle必须都在data被定义
that.noDataStyle = “none”,
that.getSuccessStyle = “block”
} else {
that.noDataStyle = “block”,
that.getSuccessStyle= “none”
}
}
});
1. 名字过长，使用省略号时的css样式
White-space:nowrap; //不换行
Overflow:hidden; //超过部分隐藏
Text-overflow:ellipsis; //省略号
2. 获取点击时列表的瞬间值
<block v-for="(item,key) in goodsStyleInfo" :for-item=“item” :key=“item.name”>
<view class='selectItemIdk" :data-item=“item” @tap=“goodsItemTap”>{{item.Name}}

3. 获取列表下标

<view class='selectItemIdk" :data-index=“key” @tap=“goodsItemTap”>{{item.Name}}

**2. 全局变量方法：**1.如果想要实现页面传值类似的功能使用：
//存储
uni.setStorage({
key: ‘con’, // 命名
data: con //内容
});
//提取
var goodslist = uni.getStorageSync(‘con’);

**2.**想要定义一个公用的全局变量：
新建js文件
定义常量
const serverurl = “https://www.imovietrailer.com/superhero”;
export default{
serverurl
}
回到页面在

**3.**通过挂载到main.js中获取服务器地址，作为全局变量
Vue.prototype.serverurl = “https://www.baidu.com”;
调用的话只需要this.serverUrl

1. 安装PyInstaller ，对.py进行打包成.exe格式
pyinstaller -F c:…\your_python_file.py
https://blog.csdn.net/qq_26877377/article/details/80357349