微信小程序的基础实现

1、打开微信小程序开发文档，其网址是产品定位及功能介绍 | 微信开放文档

2、根据里面的开发文档介绍，把微信小程序的开发工具下载到电脑上；

3、下载完成后，根据文档开发模块，简单看一下开发文档开发的内容；

4、之后，进行小程序的开发，其开发情况和前端开发是一样的情况，都是有相应的html、css和js等模块的编写，只是在微信小程序里面换成了与其相对于的其他标签；{html对应文档中的wxml；js没有变化，仍让对应js；css对应wxss}；

5、小程序里面要生成新的页面就需要在pages文件夹下面找到app.json属性pages里面添加生成，如下图所示：

6、添加一个add页面，用来实现文件的选择和百度ai功能翻译的作用，则选中添加到pages下面自动生成的add文件夹：

7、点击之后出现多个模块文件，选择后缀为wxml文件，其就是相当于在html里面写页面代码一样，实现页面结构的功能，代码如下图所示：

<!--pages/add/add.wxml-->
<!-- <text>pages/add/add.wxml</text> -->
菜单总价：{{total}}
<view wx:for="{{foodlist}}" wx:key="index">
  餐名：{{item.name}}---价格：{{item.price}}
</view>
<image src="{{imgsrc}}"></image>
<text>这是{{animal}}</text>
<button bindtap="chooseimg">点击选择图片</button>
<input bindinput="input" type="text" style="border: 1px solid red;"  placeholder="请输入要翻译的文字"/>
<!-- <text>{{trslation}}</text><button bindtap="trslation" size="mini">翻译</button> -->
<view><button bindtap="trslation" size="mini">翻译</button></view>
<text class="trslation">翻译结果：{{trslationer}}</text>

注意 ：微信小程序里面的view就相当于html里的div标签一样，和盒子一样的用处，个别标签和html里面会有一定变化，但其他标签基本都没变化，可以和html里一样正常使用。

8、wxml写完，就相当于把前端的html写完了一样，后面要进行的是编写css，而这儿则是打开wxss文件进行程序的写入：

/* pages/add/add.wxss */
.trslation{
    color: red;
}

9、当表现层写完之后，就写最后的行为层，打开后缀为js的文件，写入代码：

// pages/add/add.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        trslation: " ",
        trslationer:" ",
        animal:"史迪仔",
        total: 0,
        foodlist: [{
            name: "米饭",
            price: 2,
            count: 0
        }, {
            name: "鱼香肉丝",
            price: 20,
            count: 0
        }, {
            name: "麻婆豆腐",
            price: 15,
            count: 0
        }],
        imgsrc: "../../img/10.jpg"

    },
    chooseimg() {
        wx.chooseImage({
            count: 1,
            sizeType: ["compressed", "original"],
            sourceType: ["album", "camera"],
            success: (res) => {
                let result = res.tempFilePaths[0];
                    this.setData({
                        imgsrc: result
                    })
            },
            fail: (err) => {
                console.log(err);
            }
        })
        let fs=wx.getFileSystemManager();
        fs.readFile({
           filePath:this.data.imgsrc,
           encoding:"base64" ,
           success:(res)=>{
               let base64img=res.data;
               wx.request({
                 url: 'https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=24.748c821178d32ca6519d46e7712b39c2.2592000.1666941342.282335-27670721',
                 data:{
                     image:base64img
                 },
                 header:{
                     "Content-Type":"application/x-www-form-urlencoded",
                 },
                 method:"POST",
                 success:(res)=>{
                     console.log(res);
                  
                    this.setData({
                         animal:res.data.result[0].name
                    })
                    
                 },
                 fail:(err)=>{
                     console.log(err);

                 }
               })
           }
        })
    },
    input: function (e) {
        console.log(e);
        this.setData({
          trslation: e.detail.value
        })
      },
    trslation(){
        wx.request({
            url: 'https://aip.baidubce.com/rpc/2.0/mt/texttrans/v1?access_token=24.ef3380ee7652f4af8f41e9c356a8737b.2592000.1666955260.282335-27674629',
            data:{
                from:"zh" ,
                to: "en",
                q:this.data.trslation
            },
            header:{
                "Content-Type":"application/json;charset=utf-8",
            },
            method:"POST",
            success:(res)=>{
                console.log(res);
             
               this.setData({
                    trslationer:res.data.result.trans_result[0].dst
               })
               
            },
            fail:(err)=>{
                console.log(err);

            }
          })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

 这儿的微信小程序开发有一个重要的地方，其要在wxml里用到的数据可以通过js里面的data属性下面声明和赋值，通过双大括号把变量放到里面就可以使用其要使用的数据；

10、数据的接收和js的实现都是在js文件中编写，其中比较重要的是当你要用到许多的组件，这时一定要去看开发文档中的组件介绍和API接收，里面会把其要用到的属性配置和方法都会介绍出来，照着里面的开发步骤就可以实现你要实现的大部分功能。

11、代码实现功能：

 这是文件图片选择功能的实现截图，同时进行百度图片内容动物识别功能，下面时几个例子：

下面的是百度翻译功能的实现截图：

 

这儿是要翻译的文字

 

翻译功能成功，基本实现了要实现的功能。